Establecer borde interior en CSS

Un borde interior puede referirse a mantener fijas las dimensiones declaradas de un elemento que tiene un borde, o a dibujar un trazo visible dentro de su contorno. Use box-sizing: border-box para el primer objetivo, box-shadow: inset para un trazo interior nítido o un valor negativo de outline-offset para desplazar un contorno hacia dentro.

Use la propiedad box-sizing para establecer el borde interior en CSS

box-sizing: border-box incluye el relleno y el borde de un elemento en el ancho y el alto declarados. Controla el cálculo del tamaño, pero no dibuja un trazo independiente dentro del elemento. Para un cuadrado de 200px con un borde rojo de 10px, use box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;. La caja exterior sigue midiendo 200 por 200 píxeles, y el borde rojo ocupa parte de esa superficie. Añada padding si el contenido necesita espacio respecto del borde. Con el valor predeterminado content-box, el ancho y el alto miden el área del contenido, por lo que el relleno y los bordes aumentan las dimensiones exteriores. border-box resulta útil cuando un componente debe ajustarse a un tamaño conocido del diseño; no sustituye la elección de un ancho de borde adecuado.

Este ejemplo autónomo de JavaScript imprime HTML con el mismo tamaño y borde:

const html = '<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>';
console.log(html);

<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>

Pegue el marcado impreso en un documento HTML para ver el cuadrado de tamaño fijo.

Use la propiedad box-shadow para establecer el borde interior en CSS

Use un box-shadow con inset si quiere un trazo visible sin cambiar el tamaño que ocupa el elemento en el diseño. Para un cuadrado verde de 200px con un trazo rojo de 10px, aplique este CSS a un <div>Content</div>: <div style="width: 200px; height: 200px; background: green; box-shadow: inset 0 0 0 10px red;">Content</div>. Los dos primeros valores de la sombra son los desplazamientos horizontal y vertical; aquí ambos son cero, así que el trazo tiene el mismo grosor en todos los lados. El tercer valor es el desenfoque, que se establece en cero para obtener un borde nítido. El cuarto es la extensión, que en este ejemplo determina el grosor del trazo. inset dibuja la sombra dentro de la caja. Cambie el color o la extensión para ajustar su aspecto; el desenfoque y la extensión pueden omitirse cuando sea apropiado, ya que ambos valen cero por defecto. Como la sombra no reserva espacio en el diseño, los elementos cercanos mantienen su posición. Si también define un borde, este se conserva y puede cubrir parte de la sombra interior.

Use las propiedades outline y outline-offset para establecer el borde interior en CSS

El contorno se dibuja alrededor de un elemento y no ocupa espacio en el diseño. Aplique outline: 5px solid red; outline-offset: -5px; a un <div>Content</div> cuadrado de 200px con fondo verde para desplazar el contorno rojo hacia dentro. El desplazamiento negativo acerca el contorno desde el borde exterior hacia el contenido; no convierte un contorno en un borde. Como se dibuja sobre el elemento, puede superponerse al texto u otro contenido cercano al borde. Use este método cuando esa superposición sea aceptable, y elija box-shadow si quiere un trazo interior que permanezca dentro del área pintada del elemento.