BordesBordesCualquier elemento de una página web puede tener un borde (en inglés, border).
En esta página se tratan los siguientes temas:
La propiedad compuesta border permite establecer simultáneamente los cuatro bordes (arriba, derecha, abajo e izquierda) de un elemento, definiendo su:
Las tres características del borde se pueden escribir en cualquier orden.
  |
p {
border: red 5px solid;
}
|
Esto es un párrafo con borde de estilo solid. |
Volver al principio de la página
Los estilos de bordes definidos en CSS2 son none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.
| |
p {
border: red 5px none;
}
|
Esto es un párrafo con borde de estilo none. |
| |
p {
border: red 5px hidden;
}
|
|
| |
p {
border: red 5px dotted;
}
|
Esto es un párrafo con borde de estilo dotted. |
| |
p {
border: red 5px dashed;
}
|
Esto es un párrafo con borde de estilo dashed. |
| |
p {
border: red 5px solid;
}
|
Esto es un párrafo con borde de estilo solid. |
| |
p {
border: red 5px double;
}
|
Esto es un párrafo con borde de estilo double. |
| |
p {
border: red 5px groove;
}
|
Esto es un párrafo con borde de estilo groove. |
| |
p {
border: red 5px ridge;
}
|
Esto es un párrafo con borde de estilo ridge. |
| |
p {
border: red 5px inset;
}
|
Esto es un párrafo con borde de estilo inset. |
| |
p {
border: red 5px outset;
}
|
Esto es un párrafo con borde de estilo outset. |
Los estilos groove, ridge inset y outset producen un efecto tridimensional, pero el resultado depende del color del borde y de los colores de fondo del elemento y del elemento superior:
| |
p {
border: white 8px groove;
}
|
Esto es un párrafo con borde de estilo groove. |
| |
p {
border: white 8px ridge;
}
|
Esto es un párrafo con borde de estilo ridge. |
| |
p {
border: white 8px inset;
}
|
Esto es un párrafo con borde de estilo inset. |
| |
p {
border: white 8px outset;
}
|
Esto es un párrafo con borde de estilo outset. |
Los estilos none y hidden producen el mismo resultado (no se muestra el borde), salvo en el caso de las tablas en modo colapsado, en el que hidden oculta el borde independientemente del borde de la casilla contigua, pero none no.
Nota: En el modo colapsado, si se establece la propiedad border: none Firefox muestra todos los bordes de las celdas, mientras que Internet Explor no muestra el borde entre dos casillas contiguas si ambas tienen la propiedad border: none, como se comenta en la página de diferencias entre Firefox e Internet Explorer.
| |
table {
border-collapse: collapse;
}
td.sinborde {
border: hidden
}
|
|
||||||||||||||||||
| |
table {
border-collapse: collapse;
}
td.sinborde {
border: none
}
|
|
Volver al principio de la página
Las propiedades compuestas border-top, border-right, border-bottom y border-left permiten establecer de forma independiente los cuatro bordes (arriba, derecha, abajo e izquierda, respectivamente) de un elemento, definiendo su color, su grosor y su estilo. Se pueden escribir las tres características de cada borde en cualquier orden. Se puede definir uno, dos, tres o cuatro bordes.
| |
p {
border-left: red 5px solid;
}
|
Esto es un párrafo con borde izquierdo. |
|
| |
p {
border-top: black 5px dashed;
|
Esto es un párrafo con borde izquierdo y superior. |
|
| |
p {
border-top: black 5px dashed;
|
Esto es un párrafo con borde izquierdo, superior e inferior. |
|
| |
p {
border-top: black 5px dashed;
|
Esto es un párrafo con cuatro bordes distintos. |
Volver al principio de la página
Las propiedades border-color, border-width y border-style permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro bordes de un elemento. A cada una de las propiedades se le puedes dar uno, dos, tres o cuatro valores, que se interpretan de la siguiente manera:
| |
p {
border-color: red;
|
Esto es un párrafo con borde. |
| |
p {
border-color: red black;
|
Esto es un párrafo con borde. |
| |
p {
border-color: red black green;
|
Esto es un párrafo con borde. |
| |
p {
border-color: red black green orange;
|
Esto es un párrafo con borde. |
| |
p {
border-color: red black green;
|
Esto es un párrafo con borde. |
En general, para que el navegador muestre un borde, se tienen que definir las tres propiedades (color, grosor y estilo). Si sólo se definen dos de las propiedades no se muestra el borde , salvo si la propiedad que falta es el color (el motivo es que la hoja de estilo predeterminada del navegador asigna el color negro como color prederminado del borde y así se completan las tres propiedades).
| |
p {
border-width: 5px;
|
Esto es un párrafo con borde. |
| |
p {
border-color: red;
|
Esto es un párrafo con borde. |
| |
p {
border-color: red;
border-width: 5px;
|
Esto es un párrafo con borde. |
Volver al principio de la página
Se puede establecer de forma independiente cada propiedad de cada borde mediante las propiedades:
En general, para que el navegador muestre un borde, se tienen que definir las tres propiedades (color, grosor y estilo), aunque normalmente los navegadores asignan el color negro como color prederminado, por lo que si no se establece el color del borde suele mostrarse de color negro
Volver al principio de la página
Las etiquetas <html> y <body> también pueden tener bordes, como muestra la siguiente página de ejemplo.
El borde de <body> se adapta al contenido, sin tener en cuenta los elementos flotantes, mientras que el borde de <html> abarca los elementos flotantes, como muestra la siguiente página de ejemplo.
En el ejemplo anterior hay una diferencia entre Firefox e Internet Explorer, porque Firefox mantiene el margen interior de <html> y la imagen no toca el borde de <html>, mientras que en Internet Explorer sí que lo hace, como muestran las dos capturas siguientes:
| Firefox |  |
|---|---|
| Internet Explorer 8 |
 |
Nota: Internet Explorer 7 representa correctamente el borde de <html> y <body>. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.
Volver al principio de la página
Autor: Bartolomé Sintes Marco