你有三个选择：
1.内盒和外盒（如@xpapad所述）。
1.使用outline，例如outline:1px #000 solid;. Read more。
1.使用box-sizing，这是一个css3属性。例如，box-sizing:border-box;. Read more。

你可以用负边距来补偿它，或者简单地使用轮廓。

div { border: 10px solid red; margin: -10px};

或

div { outline: 10px solid red; }

或者你可以使用css3 boxshadow来伪造一个边框。
示例：http://jsfiddle.net/meo/K23s7/

试着使用一个负的保证金相当于你的边界，例如。

border-right: 1px;
margin-right: -1px;

对于我的用例，box-shadow属性是正确的选择。
更准确地说，是具有0模糊和一点扩散的长方体阴影。
它创建的“边框”不在div内部，但它不会占用额外的HTML空间。

button {
    background: white;
    font-size:2rem;
    padding:1rem 2rem;
    color: #4f93df;
    border-radius: 2rem;
    margin:1rem;
}

.withABorder{
  box-shadow: 0px 0px 0px 4px #4f93df;
}

<div>
  <button>Hello</button>
  <button class="withABorder">World</button>
  <br>
  <button>Hello Again</button>
</div>

使用所需的边框在当前div中包含一个内部div。

另一种选择是使用box-shadow添加边框，如下所示：

box-shadow: 0 1px 0 0 red; /* Border bottom */
box-shadow: 0 -1px 0 0 red; /* Border top */
box-shadow: -1px 0 0 0 red; /* Border left */
box-shadow: 1px 0 0 0 red; /* Border right */
box-shadow: 0 0 0 1px red; /* All the borders by using the spread properties */

如果这对其他人有帮助......我的问题是切换栏，当你悬停在它上面时会显示一个边框。我通过在不悬停时添加一个透明边框来解决这个问题：

.toggle-bar {
    text-align: center;
    background-color:lightgoldenrodyellow;
    border: 2px solid lightgoldenrodyellow;
    width:100%;
    font-style: italic;
    font-size:x-large; 
}

div.toggle-bar:hover {
    border: 2px dashed blue;
    cursor: pointer;
}