Bordes

Podcast de CSS - 016: Fronteras

En el módulo Modelo de caja, evaluamos una analogía del marco para describir cada sección del modelo de caja.

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

Propiedades del borde

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

Estilo

Para que aparezca un borde, debes definir border-style Tienes las siguientes opciones:

Cuando uses los estilos ridge, inset, outset y groove, el navegador oscurecerá el color del borde para el segundo color que se muestra para proporcionar contraste y profundidad. Este comportamiento puede variar según el navegador, en especial para colores oscuros, como black. En Chrome, estos estilos de borde se verán sólidos y, en Firefox, se aclararán para dar un segundo color más oscuro.

El comportamiento del navegador también puede variar para otros estilos de borde 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 el estilo de borde a cada lado del cuadro, haz lo siguiente: puedes usar border-top-style: border-right-style, border-left-style, y border-bottom-style.

Abreviatura

Al igual que con margin y padding, puedes usar el border atajo para definir todas las partes del borde en una 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 establecer color en todos los lados de la caja o en cada lado con border-color De forma predeterminada, usa el color de texto actual del cuadro: currentColor. Esto significa que, si solo declaras las propiedades de borde, como el ancho, el color será el valor calculado, a menos que lo configures explícitamente.

.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 del cuadro, sigue estos pasos: usar 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 es controlado por border-width El ancho de borde predeterminado es medium. Sin embargo, esto no será visible a menos que definas un estilo. Puedes usar otros anchos con nombre, como thin y thick.

Las propiedades de 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 la Logical Properties, que descubriste cómo hacer referencia al flujo de bloques y al flujo intercalado en lugar de mostrarlas en los lados superior, derecho, inferior o izquierdo.

También puedes usar los bordes:

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

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

La compatibilidad con los navegadores varía para las propiedades lógicas en los bordes, así que asegúrate de revisar la compatibilidad antes de usar el producto.

Radio del borde

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

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

Esta abreviatura agrega un borde consistente en cada esquina del cuadro. Al igual que con las otras propiedades de 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 que sigue 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 se define un único valor para una esquina, estás utilizando otra abreviatura porque el radio de un borde se divide en dos partes: los lados vertical y horizontal. Esto significa que, cuando configures border-top-left-radius: 1em, configura el radio de la parte superior izquierda a la parte superior y el radio de la parte superior izquierda a la 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 superior izquierdo en un radio elíptico en lugar del radio circular predeterminado.

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

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

Imágenes de 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 permite establecer la imagen de origen, cómo se divide la imagen, el ancho de la imagen qué tan lejos está 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 border-image-width propiedad es como border-width: es cómo configuras el ancho de la imagen de borde. La border-image-outset te permite establecer la distancia entre la imagen del borde y el cuadro que envuelve.

border-image-source

La border-image-source (fuente de la imagen del borde) puede ser un objeto url para cualquier imagen válida, incluidos los 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 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 bordes 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 border-image-repeat define cómo esos bordes llenan su espacio y el 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 la imagen de borde. Funciona igual que background-repeat.

• El valor inicial es stretch, Esto estira la imagen de origen para llenar el espacio disponible siempre que sea posible.
• El valor repeat agrupa los bordes de la imagen de origen tantas veces como sea posible. y puede recortar las regiones de los bordes para lograrlo.
• El valor de round es el mismo que el de repetición, pero en lugar de recortar las regiones de los bordes de la imagen para que se ajusten estira la imagen y la repite para lograr una repetición ininterrumpida.
• El valor space es, de nuevo, el mismo que repetir. pero este valor agrega espacio entre cada región perimetral para crear un patrón sin interrupciones.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre fronteras

.my-element {
  border: solid hotpink;
}