View on GitHub

lenguaje-css

Borders en CSS

En CSS es posible especificar el aspecto que tendrán los bordes de cualquier elemento HTML, pudiendo incluso, dar diferentes características a zonas particulares del borde, como por ejemplo, el borde superior, el borde izquierdo, el borde derecho o el borde inferior.

Propiedades de bordes

Las propiedades básicas y específicas de los bordes en CSS son las siguientes:

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.

Estilos de borde

Por último, con la propiedad border-style podemos aplicar un estilo determinado al borde de un elemento. En estilo de borde podemos elegir cualquiera de las siguientes opciones:

Veamos un ejemplo sencillo aplicando alguna de estas características:

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

Sin embargo, el borde más frecuente suele ser solid, que no es más que un borde liso y continuo. Pueden utilizarse cualquiera de los estilos indicados en la tabla anterior e incluso combinar con otras propiedades. Recuerda que si no aplica una de ellas, se aplica el valor por defecto.

Bordes múltiples (diferentes)

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:

Teniendo en cuenta esto, disponemos de 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

Ya habremos visto que con tantas propiedades, para hacer algo relativamente sencillo, nos pueden quedar varias lineas de código complejas y difíciles de leer. Al igual que con otras propiedades CSS, podemos utilizar la propiedad de atajo border, con la que podemos hacer un resumen y no necesitar indicar múltiples propiedades individuales por separado, realizando el proceso de forma más corta:

border Propiedad de atajo para simplificar valores. 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.

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. El orden, aunque no es obligatorio, si es recomendable para mantener una cierta coherencia con el estilo de código.

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 junto a la herencia de CSS. Para utilizarlas bastaría con indicarle la zona justo después de border-:

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;
}

Dichas propiedades de atajo serían las siguientes:

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 junto a la cascada. 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.

Bordes redondedados

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 hacerlo mediante código.

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

Hay varias formas de especificar el radio de las esquinas:

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;              /* Formato con un parámetro */
  border-radius: 25% 50%;           /* Formato con dos parámetros */
  border-radius: 50px 25px 10px;    /* Formato con tres parámetros */
  border-radius: 25px 0 15px 50px;  /* Formato con cuatro parámetros */
}

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 {
  /* Usando el segundo formato */
  border-radius: 5px 50px / 50px 15px;
}

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:

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

Border con imagenes

Una de las limitaciones que tenía CSS, es que, si en lugar de utilizar los bordes de los que disponemos en CSS (sólidos, punteados, etc…) quisieramos hacer algo un poco más complejo con imágenes, podría volverse una tarea muy complicada. Por esa razón, CSS3 incorporó en su momento un sistema para crear bordes extensibles basados en una imagen de molde.

La técnica 9-slice

Dicho sistema se denomina 9-slice (muy utilizado en videojuegos) y se basa en delimitar una imagen trazando cuatro líneas (en rojo). Esto hará que la imagen quede dividida en 9 fragmentos, donde el fragmento central es descartado y el resto es utilizado de molde para los bordes de un elemento:

Sistema 9-slice

De esta forma, los fragmentos 1, 3, 7 y 9 se utilizarán para las esquinas y los fragmentos 2, 4, 6 y 8 se utilizarán para los bordes laterales, pudiendo expandirlos si se requiere y considera necesario con alguna de las propiedades que veremos a continuación.

Vamos a utilizar la siguiente imagen expandible (a la izquierda), que simula ser un antiguo carrete fotográfico, como imagen de borde. 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. Una vez hecho esto, conseguiremos el resultado de la imagen de la derecha, en el cuál podremos ampliar el texto del elemento lo que queramos, que se adaptará solo a su contenido:

Ejemplo 9-slice

Para ello, utilizaremos el siguiente código CSS, donde antes que nada, establecemos un ancho al elemento con width y un border básico para que, en el caso de navegadores que no soporten border-image, tenga al menos un borde básico y nos sirva también como base a lo que vamos a hacer a continuación:

.borde {
  width: 200px;
  border: 42px solid black;
  border-image-width: 1;
  border-image-source: url(https://i.imgur.com/YC5PUl6.png);
  border-image-slice: 23%;
  border-image-repeat: round;
}

Para establecer los límites y poder utilizar imágenes en los bordes, hemos hecho uso de las siguientes propiedades de CSS:

La propiedad border-image-width

indica el tamaño que tendrá el borde de la imagen. El tamaño puede ser indicado con unidades (píxeles o porcentajes, por ejemplo) o sin ellas, lo que lo tomará como múltiplo del tamaño indicado en border-width. En nuestro ejemplo, tanto indicarle un valor de 1 como dejarlo sin especificar, sería decirle que el tamaño del borde de la imagen será de 42px, pero por ejemplo, si indicamos border-image-width: 2, le estaremos indicando que use un tamaño de 84px. Al igual que vimos en el apartado de margin se puede indicar 1, 2, 3 o 4 parámetros .

Consejo: No olvides que hay que indicar también un border-width y un border-style para que el borde CSS esté definido y se pueda visualizar.

La propiedad border-image-source

establece, mediante la expresión url(), la imagen que vamos a utilizar para crear nuestro borde con imágenes. Truco: ¡Como imagen de fondo puedes utilizar un gradiente de CSS, ya que internamente se interpretan como imágenes!

La propiedad border-image-slice

define la posición de las líneas divisorias de la imagen, o lo que es lo mismo, el tamaño de los bordes. Por defecto, el valor es de 100% (tamaño de ancho completo de la imagen), pero también podemos usar números sin unidad, que simbolizan píxeles de recorte. Se pueden especificar 1, 2, 3 ó 4 parámetros. Por otro lado, el valor opcional fill sirve para indicar que quieres rellenar el elemento con el fondo del fragmento 5, que por defecto es descartado. Útil en casos que quieras aprovechar el fondo.

En nuestro caso, nos podría valer tanto con 110 (110 píxeles de recorte) como con 23%, ya que es más o menos la cantidad apropiada para establecer el límite tanto de ancho como de alto.

La propiedad border-image-outset

establece el factor de crecimiento (hacia fuera) de la imagen. Muy útil para compensar la imagen si se extiende hasta el contenido. Usar con cuidado, ya que puede desplazar el contenido. Por defecto no tiene desplazamiento.

Modo de repetición

Habremos comprobado que en algunas ocasiones, el modo en que se repite la imagen de borde no es la apropiada, o al menos, no es la que más se adapta a nuestro caso específico. Este comportamiento se puede variar mediante la propiedad border-image-repeat:

Con dicha propiedad se establece como deben comportarse los fragmentos del borde y el tipo de repetición que deben efectuar. Se puede usar la modalidad de un parámetro en la que se aplica a todos los bordes, o la modalidad de dos parámetros donde estableces diferente comportamiento para los bordes horizontales y verticales.

Esta propiedad puede tomar los siguientes valores:

9-slice repeat

Es importante recalcar los dos últimos valores (round y space) actúan igual que repeat, pero con un comportamiento ligeramente diferente que nos puede interesar en el caso de que la zona repetida quede descompensada.

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 :

9-slice repeat

Atajo: Bordes con imágenes

Como suele ser costumbre, 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: */ border-image: url(https://i.imgur.com/YC5PUl6.png) 23% 1 0 round; }