Borde de tres lados | Programar Plus

0

Si necesita colocar un borde en solo tres lados de un elemento, hay muchas formas de hacerlo.

Puede declarar específicamente el borde en solo tres lados:

div { 
  border-top:    1px solid red;
  border-right:  1px solid red; 
  border-bottom: 1px solid red;
}

Prolijo, pero fácil de entender.

O bien, podría declarar solo un border que cubrirá los cuatro lados y eliminará el que no desee. 

div {
  border: 1px solid red;
  border-left: 0;
}

Mucho más corto, pero se basa en comprender y mantener que la anulación de la eliminación de la frontera se mantiene después de la declaración de la frontera.

O bien, puede declarar el color y el estilo y usar abreviaturas solo border-width para declarar específicamente los tres lados.

div {
  border-color: red;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}

Más corto que el primer ejemplo, pero menos repetitivo. Solo debe tener en cuenta que si el borde izquierdo adquiriera ancho, ya sería rojo y sólido.

Y luego está el hecho de que los bordes afectan el tamaño del elemento bajo el modelo de caja normal. Si desea agregar bordes sin aumentar el tamaño del elemento, deberá apoyarse en CSS3. Aquí hay una manera de hacerlo con sombras insertadas:

div {
  -webkit-box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
  -moz-box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
  box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
}

Pero luego, las sombras del recuadro insertado tienen mucho menos soporte para el navegador que los bordes. Por ejemplo, el código anterior solo funcionará en Internet Explorer versión 9+. Si prefiere usar bordes y aún no afectar el tamaño de los elementos, puede jugar con el tamaño del cuadro, que se admite hasta IE 8.

¡Ay las elecciones! Esto es algo tan pequeño, pero creo que es un buen ejemplo de cómo a menudo hay muchas formas diferentes de lograr lo mismo en CSS. Si recién está comenzando en CSS, ¿este tipo de cosas es confusa o bastante sencilla?

Ver todos los ejemplos.

(Visited 4 times, 1 visits today)