Simplifica tu CSS: Border

Después de haber simplificado las etiquetas margin y padding de nuestro css, hoy vamos aprender a simplificar la etiqueta «border«.

Muchas veces nos encontramos la etiqueta borde de nuestro CSS de la siguiente forma:

#div {
border-width: 1px;
border-style: solid;
border-color: #666666;
}

o así:

#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}

Cuando la forma simplificada y también correcta, sería así,


#div {
border:1px solid #666;
}

y así, respectivamente.


#div {
border-right:2px solid #666;
}

Veis que fácil ha sido reducir tres lineas en una, pues imaginaos esto a lo largo de todo nuestro «style.css», las lineas que ahorraremos, y lo limpio que veremos el código cuando tengamos que buscar algo.


La etiqueta «border» consta de tres parámetros:

  • width(anchura): thin, thick, medium o un valor en px.
  • style(estilo): solid, dashed, dotted, double.
  • color: nombre, hex, rgb o 0-255.
#div {
border-width: 5px;
border-style: dotted;
border-color: blue;
}
#div {
border:5px dotted blue;
}

Con estas reglas aplicamos el diseño a los 4 bordes, pero también podemos aplicarlo uno a uno definiendo el borde que queremos.


#div {
border-top: 2px dotted blue;
border-right: 1px solid red;
border-bottom: 3px double yellow;
border-left: 2px dashed black;
}

Al igual que con el margin y el padding los valores del border también se pueden agrupar en arriba/abajo y derecha/izquierda si estos valores son iguales:

#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}

#div {
border-width:3px 2px;
}

Pues bueno con esto y vuestra imaginación, ya podéis hacer todo los tipos de bordes que queráis 😉

8 comentarios en «Simplifica tu CSS: Border»

Deja un comentario

Esta web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.

ACEPTAR
Aviso de cookies

This function has been disabled for InKiLiNo.com.

A %d blogueros les gusta esto: