Truco para los bordes en CSS: Bordes internos

En esta entrada veremos como crear bordes que no influyan en el tamaño del contenedor; como bien sabrás al definir distintas propiedades como padding, margin y/o border éstas repercuten directamente en el tamaño del contenedor; es decir:

ancho_total = width + 2*border + 2*padding + 2*margin = 300px + 2*5px + 2*7px +2*5px = 334px;
largo_total = height + 2*border + 2*padding + 2*margin = 150px + 2*5px + 2*7px +2*5px = 184px;

Una ayuda visual de lo anteriormente expuesto:

¿Bordes internos en CSS?

Cuando nos referimos a "bordes internos" queremos decir que son un tipo de bordes que no influyen en el tamaño del contenedor y pueden ser muy útil como en el siguiente ejemplo:

Prueba redimensionar la ventana de tu navegador.

Como habrás notado en el ejemplo anterior; estos tres contenedores ocupan un 33% del ancho total del contenedor; si los bordes fueran los tradicionales:

El tercer contenedor no podría estar alineado en la misma fila.

Creando bordes internos en CSS

Al emplear la propiedad box-shadow es muy fácil crear bordes internos; además aprovechamos para explicar un poco el funcionamiento de la propiedad box-shadow lo cual haremos a continuación:

box-shadow: inset offset-x offset-y blur-radius spread-radius color

• inset: Este valor indica que la sombra aparecerá dentro del contenedor y no fuera de ella.
• offset-x y offset-y: Indican el desplazamiento de la sombra en el eje horizontal y vertical respectivamente.
• blur-radius Indica el grado de difuminación que para nuestro ejemplo es cero en todos los casos.
• spread-radius Permite aumentar o reducir el tamaño de la sombra.
• color: Determina el color de la sombra en su representación hexadecimal o cualquier otra soportada por CSS.

Bordes internos por lados en CSS

Para crear los bordes superior, inferior, derecho e izquierdo solo debemos de establecer el ancho que deseemos que tenga el borde en el parámetro spread-radius:

Bordes superior en CSS de 13 píxeles:

box-shadow: inset 0 13px 0 0 #08B;

Bordes izquierdo en CSS de 13 píxeles:

box-shadow: inset 13px 0 0 0 #08B;

Bordes derecho en CSS de 13 píxeles:

box-shadow: inset -13px 0 0  #08B;

Bordes inferior en CSS de 13 píxeles:

box-shadow: inset 0 -13px 0  #08B;

Bordes internos simétricos en CSS

Para crear bordes internos simétricos en CSS podemos hacer lo siguiente:

Bordes internos simétricos en CSS de 3 píxeles:

box-shadow: inset 0 0 0 3px #08B;

Bordes internos simétricos en CSS de 7 píxeles:

box-shadow: inset 0 0 0 7px #08B;

Bordes internos simétricos en CSS de 13 píxeles:

box-shadow: inset 0 0 0 13px #08B;

Bordes por diagonales en CSS

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset -13px -13px 0 0 #08B;

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset 13px -13px 0 0 #08B;

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset 13px 13px 0 0 #08B;

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset -13px -13px 0 0 #08B;