Bordes

El podcast de CSS 016: Borders

En el módulo modelo de caja, consideramos una analogía de las tramas para describir cada sección del modelo de caja.

El cuadro de borde es el marco de tus cuadros, y las propiedades border te ofrecen una gran variedad de opciones para crear ese marco casi con cualquier estilo que se te ocurra.

Propiedades del borde

Las propiedades border individuales proporcionan una forma de aplicar diseño a las distintas partes de un borde.

Estilo

Para que aparezca un borde, debes definir el border-style. Puedes elegir entre las siguientes opciones:

Cuando se usan los estilos ridge, inset, outset y groove, el navegador oscurece el color del borde del segundo color mostrado para proporcionar contraste y profundidad. Este comportamiento puede variar entre los navegadores, en especial para colores oscuros como black. En Chrome, estos estilos de borde parecerán ser sólidos y, en Firefox, se aclararán para ofrecer un segundo color más oscuro.

El comportamiento del navegador también puede variar en otros estilos de bordes, por lo que es importante que pruebes tu sitio en distintos navegadores. Un ejemplo común de esta diferencia es la forma en que cada navegador renderiza los estilos dotted y dashed.

Para establecer un diseño de borde a cada lado del cuadro, puedes usar los elementos border-top-style, border-right-style, border-left-style y border-bottom-style.

Abreviatura

Al igual que con margin y padding, puedes usar la propiedad abreviada border para definir todas las partes del borde en una sola declaración.

.my-element {
    border: 1px solid red;
}

El orden de los valores en la abreviatura border es border-width, border-style y, luego, border-color.

Color

Puedes configurar el color en todos los lados del cuadro o en cada lado individual con border-color. De forma predeterminada, usa el color de texto actual del cuadro: currentColor. Esto significa que si solo declaras propiedades del borde, como el ancho, el color será el valor calculado, a menos que lo configures de forma explícita.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Para establecer un color de borde a cada lado de la caja, usa border-top-color, border-right-color, border-left-color y border-bottom-color.

Ancho

El ancho de un borde es el grosor de la línea, y lo controla border-width. El ancho de borde predeterminado es medium. Sin embargo, esta sección no estará visible a menos que definas un estilo. Puedes usar otros anchos con nombre, como thin y thick.

Las propiedades border-width también aceptan una unidad de longitud como px, em, rem o %. Para establecer el ancho de borde a cada lado del cuadro, usa border-top-width, border-right-width, border-left-width y border-bottom-width.

Propiedades lógicas

En el módulo Propiedades lógicas, descubriste cómo hacer referencia al flujo de bloques y al flujo intercalado, en lugar de hacer referencia al flujo de bloques y al flujo intercalado, en lugar de al lado explícito superior, derecho, inferior o izquierdo.

También tienes esta capacidad con bordes:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

En este ejemplo, .my-element tiene todos los lados definidos por tener un borde punteado 2px que es el color actual del texto. El borde inline-end se define como 2px, sólido y rojo. Esto significa que en los idiomas de izquierda a derecha, como el inglés, el borde rojo estará en el lado derecho del cuadro. En los idiomas que se leen de derecha a izquierda, como el árabe, el borde rojo estará en el lado izquierdo del cuadro.

La compatibilidad del navegador es variada en cuanto a las propiedades lógicas en los bordes, así que asegúrate de verificar la compatibilidad antes de usarla.

Radio del borde

Para agregar esquinas redondeadas a un cuadro, usa la propiedad border-radius.

.my-element {
    border-radius: 1em;
}

Esta abreviatura agrega un borde coherente a cada esquina del cuadro. Al igual que con las otras propiedades del borde, puedes definir el radio del borde de cada lado con border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.

También puedes especificar el radio de cada esquina en la abreviatura, siguiendo el orden: arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Cuando defines un solo valor para una esquina, usas otra abreviatura porque un radio de borde se divide en dos partes: la vertical y la horizontal. Esto significa que cuando configuras border-top-left-radius: 1em, configuras el radio superior izquierdo-superior y el superior izquierdo-izquierda.

Puedes definir ambas propiedades por esquina de la siguiente manera:

.my-element {
    border-top-left-radius: 1em 2em;
}

Esto agrega un valor border-top-left-top de 1em y un valor border-top-left-left de 2em. Esto convierte el radio del borde izquierdo superior en un radio elíptico, en lugar del radio circular predeterminado.

Puedes definir estos valores en la abreviatura border-radius, con un / para definir los valores de la elíptica, después de los valores estándar. Esto te permite ser creativo y crear algunas formas complejas.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Imágenes del borde

No solo tienes que usar un borde basado en trazos en CSS. También puedes usar cualquier tipo de imagen con border-image. Esta propiedad abreviada te permite establecer la imagen de origen, cómo se divide la imagen, el ancho, qué tan alejado se aleja el borde del borde y cómo debe repetirse.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

La propiedad border-image-width es como border-width: es la forma en que configuras el ancho de la imagen del borde. La propiedad border-image-outset te permite establecer la distancia entre la imagen de borde y el cuadro que se ajusta.

border-image-source

border-image-source (fuente de la imagen del borde) puede ser url para cualquier imagen válida, incluidas las gradientes de CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

La propiedad border-image-slice es una propiedad útil que te permite dividir una imagen en 9 partes, compuestas por 4 líneas divididas. Funciona como la abreviatura margin, en la que defines el valor de desplazamiento superior, derecho, inferior e izquierdo.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Con los valores de desplazamiento definidos, ahora tienes 9 secciones de la imagen: 4 esquinas, 4 aristas y una sección central. Las esquinas se aplican a las esquinas del elemento con la imagen del borde. Las aristas se aplican a los bordes de ese elemento. La propiedad border-image-repeat define cómo ocupan esos bordes en su espacio, y la propiedad border-image-width controla el tamaño de las porciones.

Por último, la palabra clave fill determina si la sección del medio, a la izquierda de la división, se usa o no como imagen de fondo del elemento.

border-image-repeat

border-image-repeat es la forma en que le indicas a CSS cómo deseas que se repita tu imagen de borde. Funciona igual que background-repeat.

• El valor inicial es stretch, que estira la imagen de origen para llenar el espacio disponible cuando sea posible.
• El valor repeat coloca en mosaicos los bordes de la imagen de origen tantas veces como sea posible y puede recortar las regiones perimetrales para lograrlo.
• El valor round es el mismo que la repetición, pero en lugar de recortar las regiones del borde de la imagen para que se ajusten a la mayor cantidad posible, se estira y se repite para lograr una repetición perfecta.
• De nuevo, el valor space es el mismo que el de la repetición, pero este valor agrega espacio entre cada región perimetral para crear un patrón fluido.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las fronteras

.my-element {
  border: solid hotpink;
}