Bordes BordesCualquier elemento de una página web puede tener un borde. En esta lección aprenderás:
Los estilos de bordes definidos en CSS2 son none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.
p { border: red 3px none; } |
Esto es un párrafo con borde de estilo none |
p { border: red 3px hidden; } |
|
p { border: red 3px dotted; } |
Esto es un párrafo con borde de estilo dotted |
p { border: red 3px dashed; } |
Esto es un párrafo con borde de estilo dashed |
p { border: red 3px 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 de los colores escogidos en el fondo y en el borde:
| p { border: white 5px groove; } | Esto es un párrafo con borde de estilo groove |
| p { border: white 5px ridge; } | Esto es un párrafo con borde de estilo ridge |
| p { border: white 5px inset; } | Esto es un párrafo con borde de estilo inset |
| p { border: white 5px outset; } | Esto es un párrafo con borde de estilo outset |
La propiedad compuesta border te 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 3px solid; } | Esto es un párrafo con borde de estilo solid |
Las propiedades compuestas border-top, border-right, border-bottom y border-left te 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. Puedes escribir las tres características de cada borde en cualquier orden. Puedes definir uno, dos, tres o cuatro bordes.
| p { border-left: red 3px solid; } | Esto es un párrafo con borde izquierdo |
|
| p { border-top: black 3px dashed; border-left: red 3px solid; } |
Esto es un párrafo con borde izquierdo y superior |
|
| p { border-top: black 3px dashed; border-bottom: blue 5px dotted; border-left: red 3px solid; } |
Esto es un párrafo con borde izquierdo, superior e inferior |
|
| p { border-top: black 3px dashed; border-right: green 5px double; border-bottom: blue 5px dotted; border-left: red 3px solid; } |
Esto es un párrafo con cuatro bordes |
Las propiedades border-color, border-width y border-style te permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro bordes de un elemento. A cada una de las propiedades les puedes dar uno, dos, tres o cuatro valores, que se interpretan de la siguiente manera:
Para que el navegador muestre el borde, tienes que haber definido sus tres propiedades (color, grosor y estilo).
| p { border-color: red black; border-width: 5px 3px; border-style: dotted solid;} |
Esto es un párrafo con bordes |
| p { border-color: red; border-width: 2px 4px 6px 8px; border-style: dotted double dashed;} |
Esto es un párrafo con bordes |
Puedes establecer de forma independiente cada propiedad de cada borde mediante las propiedades:
Para que el navegador muestre un borde, tienes que haber definido sus tres propiedades (color, grosor y estilo).
Esto no es del todo cierto, porque la hoja de estilo por defecto del navegador tiene definido por ejemplo el color negro y diciendo solamente grosor y estilo, ya dibuja el borde.
Mozilla e Internet Explorer interpretan de manera distinta los bordes en las etiquetas html y body. Para ver las diferencias, abre la siguiente página de ejemplo en uno y otro navegador y compara el resultado.
Mozilla muestra tanto el borde de html como el de body. La diferencia es que el borde de html se adapta al tamaño de la ventana, mientras que el borde de body se adapta al tamaño del contenido. Además si el contenido no cabe en la ventana y es necesario utilizar la barra de desplazamiento, los bordes inferiores no se ven hasta que te desplazas al final de la página.
Internet Explorer muestra los dos bordes de la misma manera, así que si defines los dos sólo muestra uno de los dos, concretamente el borde de body. Además, es un borde que va siempre pegado a la ventana, independientemente del contenido, hasta el punto que la barra de desplazamiento vertical aparece dentro del borde. Por si fuera poco, interpreta el margin como el padding y muestra un relleno igual a la suma del margen y del relleno.
Autor: Bartolomé Sintes Marco