Volver al índice Bordes

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

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

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:

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

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

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:

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

Las propiedades individuales

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

Autor: Bartolomé Sintes Marco
Última modificación: 28 de enero de 2003