Recomendaría usar 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;
  }

Para producir un recuadro de borde dentro de un elemento la única solución que he encontrado (y he probado todas las sugerencias en este hilo en vano) es usar un pseudo-elemento como :before

Por ejemplo

.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;
}

La propiedad de tamaño de caja no funcionará, ya que el borde siempre termina fuera de todo.

Las opciones de sombra de caja tienen la doble desventaja de no funcionar realmente y no ser soportadas tan ampliamente (y costar más ciclos de CPU para renderizar, si le importa).

Es un viejo truco, pero todavía encuentro que la forma más fácil de hacerlo es usar outline-offset con un valor negativo (el ejemplo a continuación usa-6px). He aquí un violín de él-He hecho el borde exterior rojo y el contorno blanco para diferenciar los dos:

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

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

No se con que estas comparando.

Pero una manera súper simple de tener un recuadro de aspecto de borde en comparación con otros elementos no bordeados es agregar un border: ?px solid transparent; a cualquier elemento que no tenga un borde.

Hará que el elemento bordeado parezca insertado.

Http://jsfiddle.net/cmunns/cgrtd /

Si desea asegurarse de que el borde está en el interior de su elemento, puede usar

box-sizing:border-box;

Esto colocará el siguiente borde en el interior del elemento:

border: 10px solid black;

(resultado similar que obtendrías usando el parámetro additonal inset en box-shadow, pero en cambio este es para el borde real y aún puedes usar tu sombra para otra cosa.)

Nota a otra respuesta anterior: tan pronto como se utiliza cualquier inset en box-shadow de un determinado elemento, usted es limitado a un máximo de 2 sombras de caja en ese elemento y requeriría un div de envoltura para seguir sombreando.

Ambas soluciones también deben deshacerse de los efectos 3D no deseados. También tenga en cuenta que ambas soluciones son apilables (ver el ejemplo que he añadido en 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>

Si box-sizing no es una opción, otra forma de hacerlo es simplemente convertirlo en un hijo del elemento sized.

Demo

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>

Puede usar background-clip: border-box;

Ejemplo:

.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>

Así que estaba tratando de tener un borde aparece en el hover pero se movió toda la barra inferior del menú principal que no se veía tan bien lo arreglé con lo siguiente:

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

Espero que esto ayude a alguien por ahí.

Solución SCSS simple con pseudo-elementos

Demostración en Vivo: 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>

Sé que esto tiene tres años, pero pensé que podría ser útil para alguien.

El concepto es usar el selector :after (o :before) para colocar un borde dentro del elemento padre.

    .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*/

    }