Bordes CSS
Usa color, estilo y espesor en los bordes de todos los elementos.
Bordes con CSS
Los bordes nos sirven para decorar todos los elementos con líneas de diferentes espesores, colores y formas.
Esta propiedad se aplica al área de bordes de la caja.
La propiedad de los bordes
La propiedad border especifica el espesor, color y estilo de los bordes.
Es la forma abreviada para definir los bordes y puede comprender en ella todas las propiedades de los bordes juntas.
Sintaxis
Nota: debemos dejar un espacio en blanco entre los valores
Los posibles valores para definir los espesores de los bordes
Ejemplo |
|||||
Vamos a decorar los bordes de una tabla. |
|||||
|
Código
<head><style type="text/css"> table{border: blue double medium} td{border: green dotted medium} </style> </head> <body> <table> <tr> <td>Esta tabla</td> <td>tiene los bordes</td> </tr> <tr> <td>decorados con</td> <td>diferentes propiedades</td> </tr> </table> </body> |
Resultado
|
||||
| Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style | |||||
Espesor de los bordes
La propiedad border-width especifica el espesor del borde
Sintaxis
Establecer el mismo espesor para todos los bordes del selector.
Establecer el espesor de cada borde del selector por separado.
border-top-width: valor;
border-right-width: valor;
border-bottom-width: valor;
border-left-width: valor;
}
Nota: no olvides poner (;) al final de cada línea
Los posibles valores para definir los espesores de los bordes
Ejemplo |
|
Vamos a aplicar un espesor a un borde sobre un texto. |
|
|
Código
<head><style type="text/css"> p { border-width: 5px; border-style: solid; } </style> </head> <body> <p>Texto con un borde de 5 pixels</p> </body> |
Resultado
Texto con un borde de 5 pixels |
| Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style | |
Color de los bordes
La propiedad border-color especifica el color del borde
Sintaxis
Establecer el color de todos los bordes a la ves.
Establecer el color de cada borde por separado.
border-top-color: valor;
border-right-color: valor;
border-bottom-color: valor;
border-left-color: valor;
}
Los posibles valores para colorear los bordes
Ejemplo |
|
Vamos a aplicar un color a un borde sobre un título. |
|
|
Código
<head><style type="text/css"> h2{ border-color: red; border-style: solid; } </style> </head> <body> <h2>Título con un borde rojo</h2> </body> |
Resultado
Título con un borde rojo |
| Nota: para poder visualizar el borde debemos usar la propiedad border-style | |
Estilo de los bordes
La propiedad border-style especifica el estilo del borde
Sintaxis
Establecer el estilo de todos los bordes a la ves.
Establecer el estylo de cada borde por separado.
border-top-style: valor;
border-right-style: valor;
border-bottom-style: valor;
border-left-style: valor;
}
Los posibles valores para dar estilo a los bordes
Ejemplo |
|
Vamos a aplicar un estilo a cada uno de los bordes de una lista. |
|
|
Código
<head><style type="text/css"> h3{ border-top-style: dotted; border-right-style: double; border-bottom-style: dashed; border-left-style: groove; } </style> </head> <body> <h3>Diferentes estilos de bordes</h3> </body> |
Resultado
Diferentes estilos de bordes |
Tabla de las propiedades de los bordes
| Propiedad | Descripción | Valores | Detalles | Ej. |
|---|---|---|---|---|
| border | Define ancho, color y estilo general para los 4 bordes. border-top: define ancho, color y estilo para el borde superior border-right: define ancho, color y estilo para el borde derecho border-bottom: define ancho, color y estilo para el borde inferior border-left: define ancho, color y estilo para el borde izquierdo |
thin | Fino |  |
| medium | Mediano | |||
| thick | Grueso | |||
| longitud | Longitud | |||
| color | Color | |
||
| transparent | Transparente | |
||
| none | Nada | |
||
| hidden | Oculto | |
||
| dotted | Punteado | |
||
| dashed | Línea de rayas | |
||
| solid | Solido | |
||
| double | Doble | |
||
| groove | Acanalado | |
||
| ridge | En relieve | |
||
| inset | Recuadro | |
||
| outset | Resalte | |
||
| border-width | Ancho general de los 4 bordes. border-top-width: ancho del borde superior. border-right-width: ancho del borde derecho. border-bottom-width: ancho del borde inferior. border-left-width: ancho del borde izquierdo. |
thin | Fino | |
| medium | Mediano | |||
| thick | Grueso | |||
| longitud | Longitud | |||
| border-color | Color general de los 4 bordes. border-top-color:color del borde superior border-right-color:color del borde derecho border-bottom-color:color del borde inferior border-left-color:color del borde izquierdo |
color | Color | |
| transparent | Transparente | |
||
| border-style | Estilo general de los 4 bordes. border-top-style:estilo del borde superior border-right-style:estilo del borde derecho border-bottom-style:estilo del borde inferior border-left-style:estilo del borde izquierdo |
none | Nada | |
| hidden | Oculto | |
||
| dotted | Punteado | |
||
| dashed | Línea de rayas | |
||
| solid | Solido | |
||
| double | Doble | |
||
| groove | Acanalado | |
||
| ridge | En relieve | |
||
| inset | Recuadro | |
||
| outset | Resalte | |
<<< Relleno - Padding en CSS Margen - Margin en CSS >>>