<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>注意边框如何将底部的div顶出去，但轮廓不会移动顶部的div，而实际上轮廓会重叠在底部的div上。
您可以在此处阅读更多信息：
Border(边框)
Outline(轮廓)
尝试使用轮廓属性CSS Outline
轮廓不会干扰元素/ div的宽度和长度！
请点击我在底部提供的链接查看工作演示不同的边框方式、内部/内联边框，甚至不会破坏元素尺寸大小的边框！无需像其他答案中提到的那样每次都添加额外的divs！
您还可以将边框与轮廓组合使用，并且如果需要，可以使用盒子阴影（也通过链接显示）
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
通常情况下，默认情况下，'border:'会将边框放在宽度、尺寸的外部，增加整体尺寸，除非您使用'inset'值:
div {border: inset solid 1px black};
但是'outline:'是边框外的额外边框，当然仍会给元素添加额外的宽度/长度。
希望这可以帮到您
附注：我还受到启发为您制作了这个：使用边框、轮廓和盒子阴影
box-shadow: 0 0 0 1px black; 是解决 Safari 上边框半径不起作用（它们是方形而不是圆角）的绝佳方案。这是一个相当普遍的问题，看起来将在16.4中得到解决 https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes 。我看到的其他解决方案可能会比较混乱 https://medium.com/@jeandesravines/use-border-radius-and-outline-simultaneously-on-safari-14ce92889e1f - nonethewiserIsisCode提供了一个很好的解决方案。另一个方法是将边框div放置在父div中的内部。查看这个示例http://jsfiddle.net/A2tu9/
UPD: 您还可以使用伪元素:after (:before)，在这种情况下，HTML不会因额外的标记而变得混乱：
.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
.my-div上的点击事件，请在.my-div:after上添加pointer-events:none;。 - Marecky为什么不直接使用background-clip呢？
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
请参见：
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip
根据您的需求，我分享了两种解决方案：
<style type="text/css" ref="stylesheet">
.border-inside-box {
border: 1px solid black;
}
.border-inside-box-v1 {
outline: 1px solid black; /* 'border-radius' not available */
}
.border-outside-box-v2 {
box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
}
</style>
box-shadow 的运用很棒！对于底边线，可以使用 box-shadow: 0 1px 0 0 black;。 - Nanoo我来晚了，但我遇到了类似的问题。
我的解决方案是伪元素-没有额外的标记，并且你可以绘制边框而不影响宽度。
绝对定位伪元素（相对于主要元素进行定位），然后设置。
请参见以下内容，在这里查看JSFiddle。
.hello {
position: relative;
/* Styling not important */
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}
.hello::before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}
box-sizing: content-box;
（而不是box-sizing: border-box;）
<div>的背景，而是父容器的背景时，使用outline属性而不是border特别有用。 - BarryCap