Colocar borde dentro de div y no en su borde

Tengo un <div>elemento y quiero ponerle un borde. Sé que puedo escribir style="border: 1px solid black", pero esto agrega 2px a cada lado del div, que no es lo que quiero.

Preferiría que este borde fuera -1 px desde el borde del div. El div en sí es de 100 px x 100 px, y si agrego un borde, entonces tengo que hacer algunos cálculos para que aparezca el borde.

¿Hay alguna manera de hacer que aparezca el borde y asegurarme de que el cuadro seguirá siendo de 100 píxeles (incluido el borde)?

Mar 07 '12 19:03 TheMonkeyMan

Establecer box-sizingpropiedad en border-box:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

Expandir fragmento

Funciona en IE8 y superiores .

Mar 07 '2012 12:03 sandeep

También puedes usar box-shadow como este:

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 sólo funciona en navegadores modernos. Por ejemplo: no hay soporte para IE 8. Consulte caniuse.com (función de sombra de cuadro) para obtener más información.

Nov 22 '2012 17:11 caitriona