Unidad 17. Estilos CSS Avanzados (XVI)

17.14. Bordes

También tenemos las propiedades de borde. El borde forma un marco que rodea al elemento. Fuera de él queda el margin, mientras que el padding queda dentro.

La primera es border-width que indica el ancho o grosor de un borde.

Puede tomar los valores medium, thin y thick. Aunque también se aceptan valores en píxeles (los más empleados) y porcentajes que son más fáciles de manejar a la hora de crear bordes con una anchura exacta.

En este caso hemos utilizado:

.borde1 {
    border-width: 1px;
}
.borde2 {
    border-width: 5px;
}

border-style muestra el borde del elemento de una forma determinada, existen varios tipos:

border-color establece en forma hexadecimal o con nombre el color del borde de un elemento.

.borde {
   border-color: blue;
}

Como en el resto de propiedades, utilizaremos la propiedad border para resumir estas tres últimas.

De modo que el siguiente bloque:

.borde {
    border-width: 10px;
    border-style: groove;
    border-color: black;
}

Podría escribirse más fácilmente:

.borde { 
    border: 10px groove  black; 
}

En este caso podemos cambiar el orden de las propiedades, aunque te recomendamos que sigas siempre el mismo.

También podemos definir independientemente las propiedades de cada lado:

.borde {
    border-top-width: 10px;
    border-top-style: groove;
    border-top-color: black;
    border-bottom: 5px blue solid;
}

Y podemos emplear el mismo sistema que con márgenes y padding para referirnos a los cuatro lados:

.borde {
    border-width: 5px;
    border-color: blue green;
    border-style: solid dotted double groove;
}

Para practicar, realiza el Ejercicio Paso a Paso de Controles de Márgenes y Bordes.

 Cursos Informática Gratuitos