CSS: Bordes

Con el lenguaje CSS es posible modificar la apariencia de cada uno de los cuatro bordes de la caja de un elemento HTML. El borde es una línea de perímetro que rodea el relleno y, por tanto, el contenido. Es posible modificar la anchura, el color y el estilo: tres parámetros para crear bonitos diseños.

Existen varias propiedades CSS para definir los bordes de un elemento. Por ejemplo, tenemos la propiedad abreviada border, que unifica tres parámetros en una única propiedad (el ancho, el estilo y el color). Pero existen otras propiedades más específicas, descritas a continuación:

La propiedad ‘border-width’

La propiedad border-width permite modificar el ancho o grosor de los bordes. El valor de esta propiedad debe ser una medida de longitud, ya sea una longitud absoluta o relativa, aunque también se puede definir su grosor mediante algunas palabras clave: thin, medium y thick.

Lo más habitual a nivel de diseño web es especificar el grosor de los bordes mediante píxeles, pues es una medida que permite tener un control más preciso sobre el grosor. Las palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho) apenas se utilizan debido a las posibles diferencias visuales que pueden darse entre diferentes navegadores web.

Vamos a ver algunos ejemplos de grosor en los que añadiremos otras propiedades con el fin de permitir una correcta visualización del borde.

.width1 { border-width: 1px }
.width3 { border-width: 3px }
.width5 { border-width: 5px }

Resultado:

Párrafo con un borde de 1 píxel.

Párrafo con un borde de 3 píxeles.

Párrafo con un borde de 5 píxeles.

La propiedad border-width permite indicar entre un y cuatro valores. Si hay uno, el grosor se aplica a los cuatro bordes. Si hay dos, el primero se aplica arriba y abajo, mientras que el segundo se aplica a izquierda y derecha. Si hay tres, el primero se aplica arriba, el segundo a los lados y el tercero abajo. Si hay cuatro se aplica en el orden de las agujas del reloj.

Existen propiedades específicas para especificar el grosor de cada uno de los cuatro bordes de un elemento. Son las siguientes:

La propiedad ‘border-style’

Con la propiedad border-style es posible modificar el estilo de los bordes de un elemento. Existen muchos tipos de estilo, como una línea recta, una línea punteada, una línea discontinua, líneas dobles e incluso con efecto biselado. Los estilos se definen mediante palabras clave, y son las siguientes:

En definitiva, son 8 estilos de línea diferentes. Vamos a ver algunos ejemplos dejando el grosor por defecto medium y color turquesa.

Código CSS:

.solid { border-style: solid }
.double { border-style: double }
.dotted { border-style: dotted }
.dashed { border-style: dashed }
.groove { border-style: groove }
.ridge { border-style: ridge }
.inset { border-style: inset }
.outset { border-style: outset }

Resultado:

Párrafo con borde de estilo solid.

Párrafo con borde de estilo double.

Párrafo con borde de estilo dotted.

Párrafo con borde de estilo dashed.

Párrafo con borde de estilo groove.

Párrafo con borde de estilo ridge.

Párrafo con borde de estilo inset.

Párrafo con borde de estilo outset.

La propiedad border-style también admite entre uno y cuatro parámetros, pues se trata de una propiedad abreviada que permite indicar los cuatro lados de un elemento HTML. Si son cuatro siguen el orden de las agujas de un reloj empezando por el de arriba. Si son tres, indican arriba, horizontales y abajo. Si son dos, indican los verticales y los horizontales. Si es uno, indica los cuatro lados.

También existen propiedades específicas para indicar el estilo de los bordes de forma independiente en cada uno de los cuatro lados:

La propiedad ‘border-color’

Finalmente, la propiedad border-color permite cambiar el color de los bordes de un elemento HTML. Los colores se pueden indicar mediante cualquiera de los sistemas de color permitidos en CSS: con palabras clave, con código hexadecimal o mediante las funciones de los modelos de color RGB y HSL. También puede usarse el valor transparent cuando se quiere un borde transparente.

Vamos a ver algunos ejemplos:

.naranja { border-color: #ff7f2a }
.salmon { border-color: salmon }
.rojo { border-color: rgb(220, 40, 40) }

Resultado:

Párrafo con borde de color naranja.

Párrafo con borde de color salmón.

Párrafo con borde de color rojo.

Como ocurre con las dos propiedades CSS anteriores, border-color es una propiedad abreviada que permite indicar entre uno y cuatro parámetros referentes a los cuatro bordes de un elemento. Y como es de esperar, también existen propiedades específicas para indicar el color de cada lado:

Las propiedades abreviadas

También existen propiedades específicas para modificar los tres parámetros (grosor, estilo y color) de cada uno de los cuatro bordes, según su ubicación: arriba, abajo, derecha e izquierda. Son las siguientes:

Estas cuatro propiedades admiten tres parámetros cada una, que por orden son los siguientes: grosor, estilo y color. Veamos un ejemplo:

.varios {
  border-top: 2px solid #ff7f2a;
  border-right: 2px dotted fuchsia;
  border-bottom: 2px dashed teal;
  border-left: 4px double rgb(220, 40, 40);
  padding: 5px;
}

Resultado:

Párrafo con bordes de varios grosores, estilos y colores.

La propiedad ‘border’

Finalmente, la propiedad abreviada (shorthand) por excelencia es border. Con esta propiedad puede indicarse los tres parámetros o atributos de un borde para los cuatro lados a la vez. Es útil siempre y cuando se quiera aplicar el mismo borde en las cuatro aristas de la caja, algo muy habitual en diseño web.

Por ejemplo:

.border {
  border: 4px double teal;
}

Resultado:

Párrafo usando la propiedad border.