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.

texto        texto

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:

none        dotted        dashed        solid





double        groove        ridge        inset        outset

 

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

texto
.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;
}
texto

 

 

Para practicar, realiza el ejercicio paso a paso Controles de Márgenes y Bordes.


Marzo-2015
Pág. 17.16
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.