Página inicial  

trans_770 trans_160

Unidad 17. Estilos CSS Avanzado (XI)


Bordes

 

También tenemos las propiedades de borde.

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

Puede tomar los valores medium, thin y thick. Aunque también se aceptan valores en píxeles 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

En este caso ha sido:

.borde {

border-color: #FFFF00;

}

 

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

 

Debes mantener el orden width, style y color, y en este caso deberás especificar cada uno de los valores para que la regla se comporte normalmente.

 

También para los bordes es posible utilizar las mismas propiedades pero indicando a qué lado nos referimos:

.borde {

border-top-width: 10px;

border-top-style: groove;

border-top-color: black;

 

border-left-width: 10px;

border-left-style: groove;

border-left-color: black;

 

border-bottom-width: 10px;

border-bottom-style: groove;

border-bottom-color: black;

 

border-right-width: 10px;

border-right-style: groove;

border-right-color: black;

}

Que a su vez podría reescribirse como:

.borde {

border-top: 10px groove black;

border-left: 10px groove black;

border-bottom: 10px groove black;

border-right: 10px groove black;

}

Y si todos los valores son iguales para cada uno de los bordes, volvemos a utilizar la propiedad border:

.borde {

border: 10px groove black;

}

 

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

 


  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.11

Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.