Bordes (CSS)

El borde de un objeto, es el espacio que lo limita, y puede ser o no ser visible, CSS nos permite una gran cantidad de bordes que podemos escojer entre diferentes tipos, grosores y colores de la siguiente manera: 


border: grosor tipo color;
Y además también podemos definir un borde determinado:

border-top: grosor tipo color; /* superior */
border-bottom: grosor tipo color; /* inferior */
border-left: grosor tipo color; /* izquierdo */
border-right: grosor tipo color; /* derecho */

Tabla de contenido

• · Grosores
• · Tipos
• · Colores

Grosores

El grosor de un borde se define en píxels, y utilizan el subijo px, si definimos un borde de dos píxels haremos:
 

000	<div style="border: 2px solid black;">ejemplo</div>  Maximizar   Seleccionar   CSS,XML

 
Por otro lado, si no queremos que el borde sea visible, le daremos grosor 0:
 

000	<div style="border: 0;">ejemplo</div>  Maximizar   Seleccionar   CSS,XML

 

Tipos

El tipo de borde define el aspecto del mismo, ya puede ser a rayas, continuo, punteado... a elegir entre la siguiente lista:

none - Objeto sin borde
hidden - Borde del objeto oculto
dotted - Borde punteado · · ·
dashed - Borde discontínuo - - -
solid - Borde contínuo
double - Borde doble
groove - Borde con sombra oscura
ridge - Borde con sombra clara
inset - Borde 3D hacia afuera
outset - Borde 3D hacia adentro

Por ejemplo, podemos hacer un borde de puntos de 4 pixels:
 

000	<div style="border: 4px dotted black;">ejemplo</div>  Maximizar   Seleccionar   CSS,XML

 

Colores

Es el color del borde, puede ser cualquier color HTML:
 

000	<div style="border: 4px dotted #ff0000;">ejemplo</div>  Maximizar   Seleccionar   CSS,XML

 
Y este es el resultado del ejemplo: