CSS permite crear varios tipos de bordes en elementos de la página. El borde más habitual es el de una línea lisa, pero también hay otros tipos de bordes que podemos implementar como una línea de puntos, bordes redondeados, etc. En este artículo de DesarrolloWeb.com veremos las distintas posibilidades de creación de bordes en CSS.

Lo cierto es que en DesarrolloWeb.com ya hemos hablado varias veces de bordes con CSS, sobre todo para explicar modos de hacer los bordes redondeados, que suelen quedar muy atractivos en las páginas web. De todos modos, vamos a ver cómo se especifica un borde con CSS.

DIV {
   border: 1px solid #d0d0d0;
}

Así conseguiremos que todas las etiquetas DIV de la página tengan un borde de 1 píxel, sólido (de una línea sólida) y con color grisáceo (#d0d0d0).

Lo que vamos a ver en este artículo es los distintos estilos de borde, aparte del solid que ya conocemos. Para ilustrar el ejercicio, he creado una página con los distintos ejemplos de bordes. Pero ya que estamos hablando de bordes, sobre su declaración en CSS, cabe decir que podríamos utilizar otra notación distinta, en la que especificamos por separado los tres atributos del borde, como sigue:

.bordesolido{
   border-color: #aaaaaa;
   border-width: 1px;
   border-style: solid;
}

También podemos especificar los bordes por separado de cada uno de los lados del elemento, de esta manera:

.bordeporlados{
   border-top: 1px solid #ff9999;
   border-right: 2px dotted #99ff99;   
   border-bottom: 2px dashed #9999ff;
   border-left: 4px double #666666;
}

Todos estas indicaciones para la construcción de bordes las hemos visto en anteriores artículos de CSS de desarrollo web .com, como el manual de css o el taller de css.

Estilos de borde

Con el atributo border-style podemos definir varios estilos de borde, entre una gama relativamente amplia de posibilidades. No obstante, tenemos que admitir que muchos de los estilos hacen bordes un poco feos, que deberíamos utilizar con bastante cuidado.

Los posibles estilos de borde son:

• solid
• dotted
• double
• dashed
• groove
• ridge
• inset
• outset

Podemos ver todos estos estilos de borde en una página aparte.

Ahora vamos a comentar estos distintos estilos y poner ejemplos de cada uno.

Borde solid:
Este borde es de una línea sólida.

.bordesolido{
   border:-color: #aaaaaa;
   border-width: 1px;
   border-style: solid;
}

Borde dotted (punteado):
Este borde está compuesto a base de una línea de puntos.

.bordepunteado{
   border: 1px dotted #ff8833;
}

Borde double (Doble):
El borde double está compuesto por una doble línea sólida. Hay que saber que para que este borde se vea como una doble línea, tenemos que especificar un ancho de al menos 3 pixel. Así se vería un borde con dos líneas de un píxel más un espacio de separáción del borde de otro pixel. A medida que especificamos una anchura mayor del borde doble, las líneas van aumentando de grosor, así como el espacio que las separa.

.bordedoble{
   border: 9px double #990000;
}

Borde dashed (línea discontinuada):
El borde dashed es muy similar al borde punteado, pero en lugar de puntos, lo que tenemos es una línea partida.

.bordedashed{
   border: 1px dashed #660000;
}

Borde groove (ranura):
Es un borde especial, con una especie de relieve difícil de describir, creado con la combinación de colores claros y oscuros de borde.

.bordegroove{
   border: 5px groove #66cc66;
}

Borde ridge (cresta):
Este borde también es un poco raro. Parecido al groove, pero con los colores oscuros y claros invertidos.

div.borderidge{
   border: 10px ridge #6666cc;
}

Borde inset (relieve hacia dentro):
Crea un borde con una imitación de biselado, como si estuviera hundido. El efecto de este borde se ve mejor si el elemento que está bordeando tiene un color de fondo parecido al color de borde.

div.bordeinset{
   border: 10px inset #3333ff;
   background-color: #0000ff;
}

Borde outset (con relieve hacia fuera):
Este último estilo de borde imita un biselado, como si fuera un botón que está levantado. Es igual que el estilo de borde inset, pero con los colores claros y oscuros invertidos. Veremos también este efecto mejor si el elemento tiene un color de fondo.

div.bordeoutset{
   border: 10px outset #cccccc;
   background-color: #cccccc;
}

De nuevo, pongo el enlace al ejemplo donde aparecen todos estos estilos de borde.

Borde redondeado con CSS

El borde redondeado, o con las esquinas en curva, se puede especificar a partir de CSS3. Esto lo hemos explicado ya en el artículo: Bordes redondeados en CSS 3

También podemos hacerlo por medio de distintas técnicas, que no requieren de CSS3, que aun no está soportado por todos los navegadores. Podéis consultar otros artículos de DesarrolloWeb.com que ofrecen esas técnicas: Caja con borde y esquinas redondeadas.