Bordes

Cualquier elemento de una página web puede tener un borde (en inglés, border).

La propiedad compuesta border

La propiedad compuesta border permite establecer simultáneamente los cuatro bordes (arriba, derecha, abajo e izquierda) de un elemento, definiendo su:

• color (nombre de color o código RGB)
• grosor (valor absoluto de distancia, o los valores thin (fino), medium (medio) o thick (grueso))
• estilo

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.

Volver al índice

Estilos de bordes

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; }	Esto es un párrafo con borde de estilo 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 del color del borde y de los colores de fondo del elemento y del elemento superior:

	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.

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 y none sólo lo oculta si la casilla contigua tampoco tiene borde.

Volver al índice

Las propiedades compuestas border-top, border-right, border-bottom y border-left

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 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 distintos.

Volver al índice

Las propiedades border-color, border-width y border-style

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:

• 1 valor: este valor se aplica a los cuatro bordes
• 2 valores: el primer valor se aplica a los bordes inferior y superior y el segundo a los bordes derecho e izquierdo
• 3 valores: el primer valor se aplica al borde superior, el segundo a los bordes derecho e izquierdo y el tercer valor al borde inferior
• 4 valores: el primer valor se aplica al borde superior, el segundo al borde derecho, el tercer valor al borde inferior y el cuarto al borde izquierdo

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

	p { border-color: red black;   border-width: 5px 3px;   border-style: dotted solid;}	Esto es un párrafo con borde.
	p { border-color: red;   border-width: 2px 4px 6px 8px;   border-style: dotted double dashed;}	Esto es un párrafo con borde.
	p { border-width: 5px;   border-style: solid;}	Esto es un párrafo con borde.

Volver al índice

Las propiedades individuales

Se puede establecer de forma independiente cada propiedad de cada borde mediante las propiedades:

• border-top-color, border-right-color, border-bottom-color, border-left-color
• border-top-width, border-right-width, border-bottom-width, border-left-width
• border-top-style, border-right-style, border-bottom-style, border-left-style

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 índice

Bordes en html y body

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.

Nota: Internet Explorer 6 no representaba correctamente el borde de html y body, como se explica en la página de diferencias entre IE6 e IE7.

Nota: En Mozilla 1.7 el borde de html se adaptaba al tamaño de la ventana, mientras que el borde de body se adaptaba al tamaño del contenido. En Firefox, ambos bordes se adaptan al contenido.

Volver al índice