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
¿Cuál es el color de borde predeterminado?
white
black
currentColor
historicColor
.my-element { border: solid hotpink; }
¿Cuál es el ancho predeterminado de un borde?
solid
medium
1px
border-inline: 1px solid
haría...