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

• Y yo buscando un iPhone 3G por Barcelona
• Chevrolet vs Citroën
• Striptease de Pamela Anderson
• Felicidades tata
• Predice tu PageRank
• Simplifica tu CSS: Margin & padding
• Mi anuncio favorito
• Los atrapantes y los atrapadores