CSS 2 / CSS 3: Bordes

Cualquier elemento de una página web puede tener un borde (en inglés, border). En esta lección se comentan las propiedades CSS que permiten definir el borde de un elemento. Se comentan tanto las propiedades CSS 2.1 como algunas propiedades CSS 3. En la CSS 3: Bordes se comentan más propiedades CSS 3 relacionadas con bordes.

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:

Las tres características del borde se pueden escribir en cualquier orden.

p {
  border: red 5px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Estilos de bordes

Los estilos de bordes definidos en CSS 2 son none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.

p {
  border: red 5px none;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px hidden;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px dotted;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px dashed;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px double;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px groove;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px ridge;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px inset;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: red 5px outset;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: white 8px ridge;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: white 8px inset;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: white 8px outset;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 (para que se oculte el borde común, las dos casillas contiguas deben tener su borde común en none).

table {
  border-collapse: collapse;
}

td.sinborde {
  border: hidden
}
ERROR (no puede mostrarse el objeto)
Enlace externo
table {
  border-collapse: collapse;
}

td.sinborde {
  border: none
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

Propiedades border-top, border-right, border-bottom y border-left En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border-top border-right border-bottom border-left

p {
  border-left: red 5px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border-top: black 5px dashed;
  border-left: red 5px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border-top: black 5px dashed;
  border-bottom: blue 10px dotted;
  border-left: red 5px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border-top: black 5px dashed;
  border-right: green 10px double;
  border-bottom: blue 10px dotted;
  border-left: red 5px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

Propiedad border-color con 1 valor En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border-color: red 1 1 1 1 1 Propiedad border-color con 2 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border-color: red   blue 1 2 1 2 1 2

Propiedad border-color con 3 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border-color: red   blue   yellow 1 2 3 1 2 3 2 Propiedad border-color con 4 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border-color: red   blue   yellow   green 1 2 3 4 1 2 3 4

p {
  border-color: red;
  border-width: 10px;
  border-style: solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border-color: red black;
  border-width: 10px;
  border-style: solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border-color: red black green;
  border-width: 10px;
  border-style: solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border-color: red black green orange;
  border-width: 10px;
  border-style: solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border-color: red black green;
  border-width: 10px 40px;
  border-style: dashed solid dotted;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

En general, para que el navegador muestre un borde, se tendrían que definir las tres propiedades (color, grosor y estilo), pero en realidad se puede comprobar que con sólo definir el estilo ya se muestra un borde negro. El motivo es que la hoja de estilo predeterminada de los navegadores define un color y un grosor por omisión y al definir el estilo se completa la definición del borde.

p {
  border-style: solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si no se define el estilo del borde, aunque se defina el color y el grosor los navegadores no muestran el borde.

p {
  border-color: red;
  border-width: 5px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Las propiedades individuales

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

Bordes redondeados: border-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius y border-top-left-radius

La futura recomendación CSS 3: Fondos y bordes permite definir bordes con esquinas redondeadas:

Nota:

blockquote {
  padding: 3px 10px;
  border: PowderBlue 5px solid;
  border-radius: 20px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
blockquote {
  padding: 3px 10px;
  border: PowderBlue 5px solid;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
blockquote {
  padding: 3px 10px;
  border: PowderBlue 5px double;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
blockquote {
  padding: 3px 10px;
  border: PowderBlue 5px dashed;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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.