Colocar el borde dentro del div y no en su borde

También puedes usar box-shadow así:

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

Ejemplo aquí: http://jsfiddle.net/nVyXS / (pase el cursor para ver el borde)

Esto solo funciona en navegadores modernos. Por ejemplo: No es compatible con IE 8. Véase caniuse.com (box-shadow feature) para más información.

Probablemente es una respuesta tardía, pero quiero compartir con mis hallazgos. He encontrado 2 nuevos enfoques a este problema que no he encontrado aquí en las respuestas:

Frontera interior a través de box-shadow propiedad css

Sí, box-shadow se usa para agregar box-shadows a los elementos. Pero puede especificar inset sombra, que se vería como un borde interior más bien como una sombra. Solo necesita establecer sombras horizontales y verticales en 0px, y la propiedad "spread " de box-shadow al ancho de la frontera que quieres tener. Así que para el borde 'interior' de 10px escribirías lo siguiente:

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

Aquí está jsFiddle ejemplo que ilustra la diferencia entre el borde box-shadow y el borde 'normal'. De esta manera, su borde y el ancho de la caja son de un total de 100px, incluido el borde.

Más sobre box-shadow: aquí

Propiedad css Border through outline

Aquí hay otro enfoque, pero de esta manera el borde estaría fuera de la caja. Aquí está un ejemplo. Como se muestra en el ejemplo, puede usar la propiedad css outline, para establecer el borde que no afecta el ancho y la altura del elemento. De esta manera, el ancho del borde no se agrega al ancho de un elemento.

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

Más sobre el esquema: aquí

Yahoo! Esto es realmente posible. Lo encontré.

Para el Borde Inferior:

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

Para el Borde Superior:

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

Use pseudo elemento :

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

Usando ::after está estilizando el último hijo virtual del elemento seleccionado. La propiedad contentcrea un elemento anónimo reemplazado.

Estamos conteniendo el pseudo elemento usando la posición absoluta relativa al padre. Entonces usted tiene la libertad de tener cualquier fondo personalizado y/o borde en el fondo de su elemento principal.

Este enfoque no afecta la colocación de el contenido del elemento principal, que es diferente de usar box-sizing: border-box;.

Considere este ejemplo:

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

Aquí .button el ancho está restringido usando el elemento padre. Al configurar border-left-width se ajusta el tamaño de la caja de contenido y, por lo tanto, la posición del texto.

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

El uso del enfoque de pseudo-elemento no afecta al tamaño de la caja de contenido.

Dependiendo de la aplicación, el enfoque utilizando un pseudo-elemento podría o no ser un comportamiento deseable.

Sé que esto es algo más antiguo, pero ya que las palabras clave "border inside" me aterrizaron directamente aquí, me gustaría compartir algunos hallazgos que pueden valer la pena mencionar aquí. Cuando estaba agregando una frontera en el estado de flotación, obtuve los efectos de los que está hablando OP. El borde anuncia píxeles a la dimensión de la caja que lo hizo nervioso. Hay dos formas más de lidiar con esto que también funcionan para IE7.

1) Tenga un borde ya unido al elemento y simplemente cambie el color. De esta manera las matemáticas ya están incluidas.

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

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

2 ) Compensa tu borde con un margen negativo. Esto todavía agregará los píxeles adicionales, pero el posicionamiento del elemento no será nervioso en

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

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

Aunque esta pregunta ya ha sido respondida adecuadamente con soluciones que utilizan las propiedades box-shadow y outline, me gustaría ampliar ligeramente esto para todos aquellos que han aterrizado aquí (como yo) buscando una solución para una frontera interior con un desplazamiento

Así que digamos que tienes un negro 100px x 100px div y necesitas insertarlo con un borde blanco-que tiene un desplazamiento interior de 5px (digamos) - esto todavía se puede hacer con lo anterior propiedad.

Caja-sombra

El truco aquí es saber que se permiten múltiples sombras de caja, donde la primera sombra está en la parte superior y las sombras posteriores tienen un orden z inferior.

Con ese conocimiento, la declaración box-shadow será:

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>

Básicamente, lo que dice esa declaración es: renderizar la última sombra (10px blanco) primero, luego renderizar la anterior sombra negra de 5px arriba se.

Esquema con outline-offset

Para el mismo efecto que el anterior las declaraciones de esquema serían:

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 no es compatible con IE si eso es importante para usted.

Codepen demo

Para una representación consistente entre navegadores nuevos y antiguos, agregue un contenedor doble, el exterior con el ancho, el interior con el borde.

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

Esto es obviamente solo si su ancho preciso es más importante que tener un marcado adicional!

Si utiliza el tamaño de la caja: border-box significa no solo border, relleno, margen, etc. Todo el elemento vendrá dentro del padre elemento.

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>

Puede usar la propiedad outline y outline-offset en valor negativo, wor para mí:

outline: 2px solid red;
outline-offset: -2px;

La mejor solución de navegador cruzado (principalmente para soporte de IE) como @Steve dijo es hacer un div 98px en ancho y alto que agregar un borde 1px alrededor de él, o podría hacer una imagen de fondo para div 100x100 px y dibujar un borde en él.