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»

  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

    Responder

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.