Colocando el borde dentro de div y no en su borde

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

Prefiero que este borde sea -1px desde el borde del div. El div en sí mismo es 100px x 100px, y si agrego un borde, entonces tengo que hacer algunas matemáticas para que aparezca el borde.

¿Hay alguna manera de que pueda hacer que aparezca el borde y asegúrese de que el cuadro siga siendo de 100 píxeles (incluido el borde)?

Establezca la propiedad de box-sizing 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; } 
 
Hello!
Hello!

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/ (desplácese para ver el borde)

Esto funciona en navegadores modernos solamente. Por ejemplo: Sin soporte IE 8. Consulte caniuse.com (función de sombreado) para obtener más información.

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

Borde interno a través box-shadow propiedad box-shadow css

Sí, la sombra de caja se usa para agregar sombras de caja a los elementos. Pero puede especificar una sombra inset , que se parecería a un borde interno más bien como una sombra. Solo necesita establecer sombras horizontales y verticales a 0px , y la propiedad ” spread ” de la box-shadow al ancho del borde que desea tener. Entonces, para el borde “interno” de 10px escribiría lo siguiente:

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

Aquí está el ejemplo jsFiddle que ilustra la diferencia entre el borde box-shadow y el borde “normal”. De esta forma, el borde y el ancho de la caja son 100px totales, incluido el borde.

Más sobre box-shadow: aquí

Borde a través de la propiedad outline css

Aquí hay otro enfoque, pero de esta manera el borde estaría fuera de la caja. Aquí hay un ejemplo . Como se muestra en el ejemplo, puede usar la propiedad de outline css para establecer el borde que no afecta el ancho y alto del elemento. De esta forma, 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; } 
 
Hello

Sé que esto es algo más antiguo, pero dado 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 un borde en el estado de desplazamiento, obtuve los efectos de los que OP está hablando. El borde muestra píxeles de la dimensión del cuadro que lo hizo saltar. Hay otras dos maneras en que uno puede lidiar con esto que también funciona para IE7.

1) Tener un borde ya unido al elemento y simplemente cambiar 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) Compense su borde con un margen negativo. Esto aún agregará los píxeles extra, pero el posicionamiento del elemento no será nervioso

 div { width:100px; height:100px; background-color: #aaa; } div:hover { margin: -2px; border: 2px dashed #333; } 

para un renderizado consistente entre navegadores nuevos y antiguos, agregue un contenedor doble, el exterior con el ancho, el interior con el borde.

 
contents here

esto es obviamente solo si su ancho exacto es más importante que tener marcado adicional.

Aunque esta pregunta ya se ha respondido adecuadamente con soluciones que usan 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 un borde interno con un desplazamiento

Supongamos que tiene un div negro de 100px x 100px y necesita insertarlo con un borde blanco, que tiene un offset interno de 5px (por ejemplo), esto aún se puede hacer con las propiedades anteriores.

sombra de la caja

El truco aquí es saber que se permiten varias sombras de cuadro, donde la primera sombra está en la parte superior y las sombras posteriores tienen un orden z más bajo.

Con ese conocimiento, la statement de sombra de caja 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; } 
 

Si usa tamaño de caja: border-box significa no solo borde, relleno, margen, etc. Todos los elementos entrarán dentro del elemento padre.

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

It was popularised in the 1960s with the release of Letraset sheets

La mejor solución de navegador cruzado (principalmente para soporte de IE) como @Steve dijo es crear 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 100×100 px y dibujar un borde sobre ella.