Я бы рекомендовал использовать box-sizing.

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#bar{
  border: 10px solid green;
  }

для создания вставки границы внутри элемента единственное решение, которое я нашел (и я пробовал все предложения в этом потоке безрезультатно), - это использовать псевдо-элемент, такой как: before

например.

.has-inset-border:before {
  content: "foo"; /* you need something or it will be invisible at least on Chrome */
  color: transparent;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  width: 10px;
  border: 4px dashed red;
}

свойство box-sizing не будет работать, так как граница всегда заканчивается за пределами всего.

параметры box-shadow имеют двойные недостатки: они не работают и не поддерживаются так широко (и стоят больше циклов процессора для рендеринга, если вы тщательность.)

Это старый трюк, но я все еще нахожу самый простой способ сделать это-использовать контур-смещение с отрицательным значением (пример ниже использует-6px). Вот это скрипка из него-я сделал внешнюю границу красной и контур белый, чтобы различать два:

.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}

<div class="outline-offset"></div>

Я не знаю, с чем вы сравниваете.

но супер простой способ иметь вставку с рамкой по сравнению с другими не граничными элементами-это добавить border: ?px solid transparent; чтобы все элементы не иметь границы.

это заставит граничный элемент выглядеть вставкой.

http://jsfiddle.net/cmunns/cgrtd/

если вы хотите убедиться, что граница находится внутри вашего элемента, вы можете использовать

box-sizing:border-box;

это поместит следующую границу внутри элемента:

border: 10px solid black;

(аналогичный результат вы получите, используя дополнительный параметр inset на box-shadow, но вместо этого это для реальной границы, и вы все еще можете использовать свою тень для чего-то еще.)

примечание к другому ответу выше: как только вы используете любой inset on box-shadow определенного элемента, вы ограничены максимум 2 box-тени на этом элементе и потребуется оболочка div для дальнейшего затенения.

оба решения должны также избавить вас от нежелательных 3D-эффекты. Также обратите внимание, что оба решения являются стекируемыми (см. пример, который я добавил в 2018 году)

.example-border {
  width:100px;
  height:100px;
  border:40px solid blue;
  box-sizing:border-box;
  float:left;
}

.example-shadow {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  box-shadow:0 0 0 40px green inset;
}

.example-combined {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  border:20px solid orange;
  box-sizing:border-box;
  box-shadow:0 0 0 20px red inset;
}

<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>

Если box-sizing это не вариант, Другой способ сделать это, просто сделать это ребенок от размеров элемента.

демо

CSS

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
}
.border {
  border: 1px solid;
  display: block;
}
.medium { border-width: 10px; }
.large  { border-width: 25px; }

HTML

<div class="box">
  <div class="border small">A</div>
</div>
<div class="box">
  <div class="border medium">B</div>
</div>
<div class="box">
  <div class="border large">C</div>
</div>

вы можете использовать background-clip: border-box;

пример:

.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}

<div class="example">Example with background-clip: border-box;</div>

Так что я пытался иметь границу появляются при наведении, но он переместил всю нижнюю панель главного меню, которое не выглядело все, что хорошо я исправил его следующим образом:

#top-menu .menu-item a:hover {
    border-bottom:4px solid #ec1c24;
    padding-bottom:14px !important;
}
#top-menu .menu-item a {
    padding-bottom:18px !important;
}

Я надеюсь, что это поможет кому-то там.

простое решение SCSS с псевдо-элементами

демо:https://codepen.io/vlasterx/pen/xaMgag

// Change border size here
$border-width: 5px;

.element-with-border {
	display: flex;
	height: 100px;
	width: 100%;
	position: relative;
	background-color: #f2f2f2;
	box-sizing: border-box;
	
	// Use pseudo-element to create inset border
	&:before {
		position: absolute;
		content: ' ';
		display: flex;
		border: $border-width solid black;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: $border-width solid black;
		// Important: We must deduct border size from width and height
		width: calc(100% - $border-width); 
		height: calc(100% - $border-width);
	}
}

<div class="element-with-border">
  Lorem ipsum dolor sit amet
</div>

Я знаю, что это три года, но подумал, что это может быть полезным кому-то.

концепция заключается в использовании селектора :after (или: before) для размещения границы внутри родительского элемента.

    .container{
        position:relative; /*Position must be set to something*/
    }

    .container:after{
        position:relative;
        top: 0;
        content:"";
        left:0;
        height: 100%; /*Set pixel height and width if not defined in parent element*/
        width: 100%; 

        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;

        border:1px solid #000; /*set your border style*/

    }