Truco para los bordes en CSS: Bordes internos

- Andrés Cruz

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 tradicionales en CSS

¿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:

1
2
3

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:

1
2
3

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;
Borde de 13px

Bordes izquierdo en CSS de 13 píxeles:

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

Bordes derecho en CSS de 13 píxeles:

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

Bordes inferior en CSS de 13 píxeles:

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

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 de 3px

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

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

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

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

Bordes por diagonales en CSS

Bordes por diagonales en CSS de 13 píxeles:

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

Bordes por diagonales en CSS de 13 píxeles:

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

Bordes por diagonales en CSS de 13 píxeles:

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

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset -13px -13px 0 0 #08B;
Bordes de 13px
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.