Con CSS podemos modificar los bordes de los elementos de un documento HTML. Desde su color o tamaño hasta redondearlos o usar imágenes expandibles.

En CSS es posible especificar las propiedades que tendrán los bordes de cualquier elemento, pudiendo incluso, dar valores distintos a las diferentes zonas predeterminadas del elemento (zona superior, izquierda, derecha o zona inferior).

Las propiedades básicas existentes de los bordes en CSS son las siguientes:

Propiedad Valor Significado
border-color: [color] Especifica el color que se utilizará en el borde.
border-width: thin | medium | thick Especifica un tamaño predefinido para el grosor del borde.
[tamaño] También se puede indicar el tamaño concreto del grosor del borde.
border-style: none No utiliza ningún estilo para el borde (igual a grosor de borde 0).
hidden Oculto. Idéntico al anterior salvo para conflictos con tablas.
dotted Establece un borde basado en puntos.
dashed Establece un borde basado en rayas (línea discontínua).
solid Establece un borde sólido (línea contínua).
double Establece un borde doble (dos líneas contínuas).
groove Establece un borde biselado con luz desde arriba.
ridge Establece un borde biselado con luz desde abajo. Opuesto a groove.
inset Establece un borde con profundidad «hacia dentro».
outset Establece un borde con profundidad «hacia fuera». Opuesto a inset.

En primer lugar, border-color establece el color del borde, de la misma forma que lo hicimos en apartados anteriores de colores. En segundo lugar, con border-width podemos establecer la anchura o grosor del borde utilizando tanto palabras clave predefinidas como un tamaño concreto con cualquier tipo de las unidades ya vistas. Por último, con border-style podemos aplicar un estilo determinado al borde de un elemento.

Veamos un ejemplo sencillo:

div {
    border-color: grey;
    border-width: 1px;
    border-style: dotted;
}

Ojo: Para que un borde se muestre deben estar especificadas estas tres características (color, grosor y estilo). Si se establece un grosor y un color, pero no un estilo, el navegador establece el estilo por defecto none y no se muestra el borde.

Sin embargo, el borde más frecuente suele ser solid, que no es más que un borde liso. Pueden utilizarse cualquiera de los estilos indicados en la tabla anterior. Veamos como se verían los diferentes estilos de borde utilizando 10 píxels de grosor y color gris:

Estilos

Bordes con varios parámetros

Hasta ahora, sólo hemos utilizado un parámetro en cada propiedad, lo que significa que se aplica el mismo valor para cada borde de un elemento (borde superior, borde derecho, borde inferior y borde izquierdo). Sin embargo, podemos especificar uno, dos, tres o cuatro parámetros, dependiendo de lo que queramos hacer:

Propiedad Valor Significado
border-color: [c1] 1 parámetro. Aplica el color c1 a todos los bordes del elemento.
[c1] [c2] 2 parámetros. c1: borde superior/inferior, c2: laterales.
[c1] [c2] [c3] 3 parámetros. c1: borde superior, c2: laterales, c3: borde inferior.
[c1] [c2] [c3] [c4] 4 parámetros. Orden de las agujas del reloj, c1: borde superior.

De la misma forma, podemos hacer exactamente lo mismo con las propiedades border-width y border-style. Teniendo en cuenta esto, tenemos mucha flexibilidad a la hora de especificar esquemas de bordes más complejos:

div {
    border-color: red blue green;
    border-width: 2px 10px 5px;
    border-style: solid dotted solid;
}

En el ejemplo anterior hemos utilizado 3 parámetros, indicando un elemento con borde superior rojo sólido de 2 píxeles de grosor, con borde izquierdo y derecho punteado azul de 10 píxeles de grosor y con un borde inferior verde sólido de 5 píxeles de grosor.

Atajo: Bordes

Al igual que con otras propiedades CSS, podemos utilizar la propiedad de atajo border, con la que podemos hacer un resumen y prescindir de otras propiedades, realizando el proceso de forma más corta:

div {
    border: <width> <style> <color>
}

Por ejemplo:

div {
    border: 1px solid #000000;
}

Así pues, estamos aplicando un borde de 1 píxel de grosor, estilo sólido y color negro a todos los bordes del elemento, ahorrando mucho espacio y escribiéndolo todo en una sola propiedad.

Consejo: Intenta organizarte y aplicar siempre los atajos si es posible. Ahorrarás mucho espacio en el documento y simplificarás la creación de diseños.

Bordes específicos

Otra forma, quizás más intuitiva, es la de utilizar las propiedades de bordes específicos (por zonas) y aplicar estilos combinándolos con la herencia de CSS. Para utilizarlas bastaría con indicarle la zona justo después de border-. Un ejemplo:

div {
    border-bottom-width:2px;
    border-bottom-style:dotted;
    border-bottom-color:black;
}

Esto dibujaría sólo un borde inferior negro de 2 píxeles de grosor y con estilo punteado. Ahora imaginemos que queremos un elemento con todos los bordes en rojo a 5 píxeles de grosor, salvo el borde superior, que lo queremos con un borde de 15 píxeles en color naranja. Podríamos hacer lo siguiente:

div {
    border: 5px solid red;
    border-top-width: 15px;
    border-top-color: orange;
    border-top-style: solid;    /* Esta propiedad no es necesaria (se hereda) */
}

El ejemplo anterior conseguiría nuestro objetivo. La primera propiedad establece todos los bordes del elemento, sin embargo, las siguientes propiedades modifican sólo el borde superior, cambiándolo a las características indicadas.

Recuerda que también existen atajos para estas propiedades de bordes en zonas concretas, lo que nos permite simplificar aún más el ejemplo anterior, haciéndolo más fácil de comprender:

div {
    border: 5px solid red;
    border-top: 15px solid orange;
}

Ojo: Es muy importante entender como se está aplicando la herencia en los ejemplos anteriores, puesto que es una de las características más complejas de dominar de CSS. Por ejemplo, si colocaramos el border-top antes del border, este último sobreescribiría los valores de border-top y no funcionaría de la misma forma.

Esquinas redondeadas

CSS3 añade interesantes características en materia de bordes, como la posibilidad de crear bordes con esquinas redondeadas, característica que en versiones anteriores de CSS era muy complicado de lograr, necesitando recurrir al apoyo de imágenes gráficas. Por su parte, en CSS3 es realmente sencillo.

Basta con utilizar la propiedad border-radius, con la cual podrás especificar un radio para el borde de las esquinas. Por defecto, este borde es de tamaño 0, por lo que no hay borde redondeado. A medida que se aumenta este valor, el borde se redondea más. Una vez llegado a su máximo, no se apreciará ningún cambio.

Esquinas

Hay varias formas de especificar el radio de las esquinas:

Propiedad Valor Significado
border-radius: [e1] 1 parámetro. Aplica el mismo radio a todas las esquinas.
[e1] [e2] 2 parámetros. e1: sup-izq e inf-dcha, e2: sup-dcha e inf-izq.
[e1] [e2] [e3] 3 parámetros. e1: sup-izq, e2: sup-dcha e inf-izq, e3: inf-dcha.
[e1] [e2] [e3] [e4] 4 parámetros. Orden de las agujas del reloj. e1: superior-izquierda.

El primer formato, un único parámetro, aplica ese tamaño a todas las esquinas del borde.

El segundo formato, con dos parámetros, aplica el primer valor, e1, a las esquinas superior-izquierda e inferior-derecha, y el segundo valor, e2, a las esquinas superior-derecha e inferior-izquierda.

En el tercer formato, se aplica el parámetro e1 a la esquina superior-izquierda, el parámetro e2 a las esquinas superior-derecha e inferior-izquierda y el parámetro e3 a la esquina inferior-derecha.

Y por último, en el cuarto formato, se aplica el tamaño de cada valor a cada esquina por separado, en el sentido de las agujas del reloj. O lo que es lo mismo, e1 a la esquina superior-izquierda, e2 a la esquina superior-derecha, e3 a la esquina inferior-derecha y e4 a la esquina inferior-izquierda.

A modo de ejemplo teórico, pueden ver un ejemplo de la aplicación de varios formatos:

div {
    border-radius: 25px;                /* Primer formato */
    border-radius: 25% 50%;             /* Segundo formato */
    border-radius: 50px 25px 10px;      /* Tercer formato */
    border-radius: 25px 0 15px 50px;    /* Cuarto formato */
}

Esquinas redondeadas irregulares

Truco: Es posible diferenciar el radio horizontal del radio vertical de una esquina determinada, creando una esquina redondeada irregular.

Para conseguirlo, no hay más que añadir una barra (/) y repetir nuevamente el número de parámetros escogido. De esta forma, los parámetros a la izquierda de la barra representan el radio horizontal, mientras que los que están a la derecha, representan el radio vertical.

div {
    border-radius: 5px 50px / 50px 15px;    /* Usando el segundo formato */
}

Esquinas específicas

De la misma forma que hemos visto con anterioridad en otras propiedades CSS similares, también es posible especificar los valores de cada esquina mediante propiedades por separado:

Propiedad Valor Significado
border-top-left-radius: [tamaño] Indica un radio para redondear la esquina superior izquierda.
border-top-right-radius: [tamaño] Indica un radio para redondear la esquina superior derecha.
border-bottom-left-radius: [tamaño] Indica un radio para redondear la esquina inferior izquierda.
border-bottom-right-radius: [tamaño] Indica un radio para redondear la esquina inferior derecha.

Estas propiedades son ideales para aplicar junto a la herencia de CSS y sobreescribir valores específicos.

Bordes con imágenes

Otra de las novedades que ofrece CSS3 es la de utilizar una imagen como borde. Sin embargo, su implementación no es tan sencilla como utilizar una imagen de fondo, ya que el borde debería definir claramente las zonas de la imagen para tenerlas en cuenta a la hora de ampliar, reducir o estirar el elemento y sus bordes.

En este ejemplo vamos a utilizar la siguiente imagen expandible, que simula ser un antiguo carrete fotográfico, como borde de capa. Las líneas rojas no forman parte de la imagen original, sino que se utilizan en este ejemplo para dejar claro cuáles serían los límites marcados con border-image-slice.

Divisiones en Border-image

Y utilizamos el siguiente código CSS:

.borde {
  border-image-width: 24px;
  border-image-source: url(http://i.imgur.com/lC5gBC8.png);
  border-image-slice: 54 85;
  border-image-outset: 6px;
  border-image-repeat: repeat repeat;
}

Ahora repasemos las propiedades para ver que hace cada una:

Propiedad Valor Significado
border-image-width: 1 | [tamaño] Grosor del borde con imagen.
border-image-source: none | url(imagen.png) Imagen con bordes a utilizar.
border-image-slice: [top] [right] [bottom] [left] Límites de los bordes en la imagen.
border-image-outset: 0 | [tamaño] Desplazamiento de la imagen hacia fuera.
border-image-repeat: stretch | repeat | round | space Comportamiento de repetición.
Valor Significado
stretch Los lados se estiran hasta rellenar el área.
repeat Los lados se repiten hasta rellenar el área.
round Igual que repeat, pero estira los fragmentos de imagen hasta llenar el área completa.
space Igual que repeat, pero añade espacios hasta llenar el área completa.

Para verlo más claramente, echemos un vistazo a esta representación visual del comportamiento de cada uno:

Border-image-repeat values

Nota: En border-image-repeat se pueden especificar dos valores para hacer referencia a la repetición horizontal (top y bottom) y a la repetición vertical (left y right), aunque si sólo se especifica un valor, se entiende que es la misma repetición para ambos.

Utilizando la imagen y código CSS anterior, obtendríamos un resultado similar a este, que se adaptaría sólo al contenido que escribamos dentro del elemento HTML con clase borde:

CSS: Border-image en acción

Atajo: Bordes con imágenes

Como suele ser constumbre, este tipo de propiedades tienen una propiedad para ahorrar espacio y escribirlo todo de una sola vez. En este caso, la sintaxis es la siguiente:

div {
    border-image: <source> <slice> <width> <outset> <repeat>
}

Que se traduciría, por ejemplo, en:

div {
    border-image: url(borde.png) 54 85 repeat;
}

Si quieres experimentar con estas funcionalidades y características, puedes utilizar el sitio web Border Image Generator, el cuál permite hacerlo de una forma relativamente gráfica y sencilla.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).