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
.
![Demostración de los bordes en Chrome, Firefox y Safari, que muestra las sutiles diferencias en la forma en que se muestran los bordes](https://web.developers.google.cn/static/learn/css/borders/image/the-border-demo-chrome-b2a96d1dfcbd9.jpg?authuser=5&hl=es)
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
¿Cuál es el color de borde predeterminado?
black
white
currentColor
text-color
calculado y es el color de borde predeterminado.historicColor
.my-element { border: solid hotpink; }
¿Cuál es el ancho predeterminado de un borde?
1px
medium
solid
border-style
, no border-width
.border-inline: 1px solid
haría...
border-block
sería la parte superior y la inferior.