在div内而不是在其边缘放置边框

如果使用box-sizing：border-box不仅意味着border，padding，margin等。所有元素都将位于父元素的内部。

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

为了在新旧浏览器之间实现一致的渲染，请添加一个双重容器，外部包含宽度，内部包含边框。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

仅当您的精确宽度比添加额外的标记更重要时，这显然很明显！

最好的跨浏览器解决方案（主要用于IE支持），例如@Steve，说的是使div的宽度和高度为98px，而不是在其周围添加边框1px，或者您可以为div的背景图像制作100x100 px并在其上绘制边框。

尽管使用box-shadow和outline属性的解决方案已经充分回答了这个问题，但我想对所有落在这里的人（例如我自己）进行一点扩展，以寻找具有偏移量的内部边界的解决方案

因此，假设您有一个黑色的100px x 100px，div并且需要用白色边框插入它（内部偏移为5px）（例如），这仍然可以通过上述属性来完成。

盒子阴影

这里的技巧是知道允许多个框阴影，其中第一个阴影在顶部，随后的阴影具有较低的z顺序。

有了这些知识，框阴影声明将为：

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

基本上，该声明的意思是：首先渲染最后一个（10px白色）阴影，然后再渲染上面的前5px黑色阴影。

外形与轮廓偏移

与上述效果相同，大纲声明为：

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

注意： 如果这对您很重要，则outline-offset IE不支持。

Codepen演示

您可以使用这些属性，outline并outline-offset使用负值而不是使用regular border来为我工作：

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

我知道这有些老了，但是由于关键字“ border inside”直接把我带到了这里，所以我想分享一些可能值得在这里提及的发现。当我在悬停状态上添加边框时，我得到了OP在谈论的效果。边框将像素广告到框的尺寸，使框变得跳跃。还有两种方法可以解决此问题，这些方法也适用于IE7。

1）在元素上已附加边框，只需更改颜色即可。这样，数学已经包括在内。

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2）以负边距补偿边界。这仍然会增加额外的像素，但是元素的位置不会跳动

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

可能这是迟来的答案，但我想与我的发现分享一下。我找到了2种新方法来解决此问题，但在答案中却没有找到：

通过box-shadowCSS属性的内部边界

是的，box-shadow用于将box-shadow添加到元素。但是您可以指定inset阴影，该阴影看起来像是内部边框而不是阴影。您只需要将水平和垂直阴影设置为0px，并将的“ spread”属性设置为box-shadow要具有的边框的宽度。因此，对于10px的“内部”边框，您将编写以下内容：

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

这是jsFiddle示例，说明了box-shadowborder和“ normal” border 之间的区别。这样，边框和框的总宽度（包括边框）为100px。

有关盒影的更多信息：此处

通过轮廓CSS属性进行边框

这是另一种方法，但是这样边界就可以在盒子外面了。这是一个例子。如下例所示，您可以使用css outline属性来设置不影响元素的宽度和高度的边框。这样，边框宽度不会添加到元素的宽度。

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

有关大纲的更多信息：这里

雅虎！这确实是可能的。我找到了。

对于下边框：

div {box-shadow: 0px -3px 0px red inset; }

对于顶部边框：

div {box-shadow: 0px 3px 0px red inset; }

您也可以像这样使用box-shadow：

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

此处的示例：http : //jsfiddle.net/nVyXS/（悬停以查看边框）

这仅在现代浏览器中有效。例如：不支持IE 8。 有关更多信息，请参见caniuse.com（框阴影功能）。

将box-sizing属性设置为border-box：

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

它适用于IE8及更高版本。