将边界放置在div内部，而不是在其边缘上

为了在新旧浏览器之间保持一致的呈现，可以添加一个双容器，外部的容器具有宽度，内部的容器具有边框。

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

这显然只在精确宽度比额外标记更重要的情况下才会发生!

设置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,以上上工作。

你也可以像这样使用盒子阴影:

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。

我知道这有点老，但由于关键字“内部边界”直接让我在这里，我想分享一些值得在这里提到的发现。 当我在悬停状态上添加边界时，我得到了OP所说的效果。边框的广告像素与盒子的尺寸一致，这使它跳动。 还有两种方法可以处理这个问题，也适用于IE7 < p > 1) 有一个边界已经附加到元素，并简单地改变颜色。

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


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

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


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

最好的跨浏览器解决方案(主要是IE支持)像@Steve说的是做一个div 98px的宽度和高度，而不是在它周围添加1px的边界，或者你可以为div 100x100px做一个背景图像，并在上面画一个边界。

也许这是一个迟来的答案，但我想分享我的发现。我发现了2种解决这个问题的新方法，这是我在答案中没有发现的:

内部边界通过box-shadow css属性

是的，box-shadow用于为元素添加box-shadow。但是你可以指定inset阴影，它看起来像一个内边框，而不是一个阴影。你只需要设置水平和垂直阴影为0px，并设置box-shadow的“spread”属性为你想要的边界宽度。所以对于10px的“内”边框，你可以这样写:

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

下面是jsFiddle的例子，它说明了box-shadow边界和“正常”边界之间的区别。这样你的边框和盒子宽度总共是100px，包括边框。

更多关于box-shadow:在这里

通过outline css属性设置边框

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

更多关于大纲:在这里

雅虎这真的是可能的。我找到了。

对于底部边界:

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

Top Border:

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

使用# EYZ0:

.button {
background: #333;
color: #fff;
float: left;
padding: 20px;
margin: 20px;
position: relative;
}


.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
}

<div class='button'>Hello</div>

Using ::after you are styling the virtual last child of the selected element. content property creates an anonymous replaced element.

We are containing the pseudo element using absolute position relative to the parent. Then you have freedom to have whatever custom background and/or border in the background of your main element.

This approach does not affect placement of the contents of the main element, which is different from using box-sizing: border-box;.

Consider this example:

.parent {
width: 200px;
}


.button {
background: #333;
color: #fff;
padding: 20px;
border: 5px solid #f00;
border-left-width: 20px;
box-sizing: border-box;
}

<div class='parent'>
<div class='button'>Hello</div>
</div>

这里.button宽度使用父元素约束。设置border-left-width可以调整内容框的大小，从而调整文本的位置。

.parent {
width: 200px;
}


.button {
background: #333;
color: #fff;
padding: 20px;
position: relative;
}


.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
border-left-width: 20px;
}

<div class='parent'>
<div class='button'>Hello</div>
</div>

使用伪元素方法不会影响内容框的大小。

根据应用程序的不同，使用伪元素的方法可能是也可能不是理想的行为。

如果你使用box-sizing: border-box不仅表示边框， 填充、保证金等。所有元素都将进入父元素 < / p >元素。

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>

所以，假设你有一个黑色的100px x 100px div，你需要用一个白色的边框来嵌入它-有一个内部抵消的5px(比如说)-这仍然可以用上面的属性来完成。

box-shadow

这里的技巧是知道允许多个盒子阴影，其中第一个阴影在顶部，随后的阴影具有较低的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>

Basically, what that declaration is saying is: render the last (10px white) shadow first, then render the previous 5px black shadow above it.

outline with outline-offset

For the same effect as above the outline declarations would be:

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

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

<div></div>

NB: outline-offset isn't supported by IE if that's important to you.

Codepen demo

你可以使用属性outline和outline-offset的负值，而不是使用常规的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>

你可以用偏移量来查看大纲，但这需要一些填充来存在于你的div上。或者你完全可以在里面放置一个边界div

<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>

你可能需要摆弄假边界div的边缘，以适合你喜欢的。

更现代的解决方案可能是使用css variables和calc。calc被广泛支持，但是variables还没有在IE11中(可使用腻子)。

:root {
box-width: 100px;
border-width: 1px;
}


#box {
width: calc(var(--box-width) - var(--border-width));
}

虽然这确实需要一些计算，这是最初的问题想要避免的。我认为这是一个使用计算的好时机，因为它们是由css本身控制的。它也不需要额外的标记或占用以后可能需要的其他css属性。

这个解决方案只有在不需要固定的高度。

我在上面没有看到的一个解决方案是在输入上填充，我99%的时间都是这样做的。你可以按照……

input {
padding: 8px;
}


input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}

我喜欢的是，我有一个完整的菜单，每边的边框+填充+过渡属性。

11年后，答案在这里:

我希望我能帮助那些11年后也看到这个问题的人。