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 pensamientos en “Simplifica tu CSS: Border

  1. Gracias por tu pronta respuesta, el caso es que me aparecen 2 .entry img

    .entry img {
    overflow: hidden;
    }
    ——
    .entry img {
    margin: 5px;
    padding: 5px;

    }
    ——

    Lo he puesto en el 1º sustituyendo lo que traia y nada

  2. Pingback: Dar estilo al código en WordPress

Deja un comentario