CSS Propiedades: Border Color, width, tipo de acabado, etc.

Al trabajar con CSS, tenemos la opción de trabajar con bordes y estos nos dan mucho juego.

Lo primero que hay que saber, es que como todo recuadro, tiene 4 bordes (Coco diría… arriba, abajo, derecha e izquierda).

En propiedades utilizaremos los siguientes términos para referirnos a cada uno.

• Arriba: Top
• Abajo: Bottom
• Derecha: Right
• Izquierda: Left

Así mismo, podemos asignar las diferentes propiedades con cada uno de los lados, o bien en función del número de valores en la propiedad, se asignarán de una determinada manera. Así tendremos que si ponemos:

• si establecemos 1 color (o valor de propiedad), este será para los 4 bordes
• si establecemos 2 colores, el primero será para los bordes horizontales, y el segundo para los bordes verticales
• si establecemos 3 colores, el primero será para el borde superior, el segundo para los verticales (izquierdo y derecho) y el tercero para el borde inferior.
• si establecemos 4 colores, el primero será para el borde superior, el segundo para el borde derecho, el tercero para el inferior, y el ultimo para el izquierdo (sigue el sentido de las agujas del reloj).

Así podemos escribir más o menos texto en función de nuestras necesidades.

El ejemplo más sencillo sería el siguiente

DIV

{

border:1px solid #000000;

}

decimos que queremos un borde liso, de color negro y con un pixel de grosor.

Si quisieramos que cada borde fuera diferente

DIV

{

border-top:1px solid #009900;

border-left:2px solid #000099;

border-bottom:2px solid #660000;

border-right:3px solid #300000;

}

Aquí tendríamos un borde diferente para cada lado.

también podriamos haberlo escrito así:

DIV

{

border: solid 1px 3px 2px 2px;

border-color: #009900  #300000 #660000 #000099;

}

Los estilos de borde

a parde de hacer un recuadro con borde liso, CSS nos permite tunear un poco el tipo de borde que dibujemos, así tenemos las siguientes opciones:dashed

• dotted: Para un borde punteado
• double: Para un borde con doble linea
• groove: es un borde en relieve
• inset: borde con forma de bisel pero que da sensación de profundidad
• ridge: otro borde en relieve, parece que el marco sobresalga
• solid: es el clásico y es el liso, una linea continua
• outset: relieve con forma de botón levantado

la aplicación de los mismos sería de la siguiente manera:

DIV

{

border: 1px dotted #000000;

}

donde en dotted, podríamos poner el estilo de borde que nos interese, o una linea para cada lado del recuadro.