# Bordes

Cualquier elemento de una página web puede tener un borde. En esta lección aprenderás:

- los estilos de bordes que existen
- la propiedad compuesta border
- las propiedades compuestas border-top, border-right, border-bottom y border-left
- las propiedades border-color, border-width y border-style
- el resto de propiedades individuales (border-top-color, etc)
- diferencias entre navegadores

## 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 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

Volver al índice

## La propiedad compuesta border

La propiedad compuesta border te 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 dotted; } | Esto es un párrafo con borde de estilo solid

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

Volver al índice

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

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:

- 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

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

Volver al índice

## Las propiedades individuales

Puedes 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

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.

Volver al índice

## Diferencias entre navegadores

## Bordes en html y body

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.

Volver al índice