Cómo agregar imágenes de borde y bordes degradados con CSS puro

Introducción

Es posible que hayas utilizado bordes CSS en tus proyectos. Esto te permitió configurar border-style, border-colory border-width. Ahora, los navegadores web modernos te permiten usar imágenes de borde y bordes degradados.

En este artículo, explorarás border-image-sourcey border-image-slice.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Se requiere cierta familiaridad con CSS. Si necesita un repaso, puede que le resulte útil la serie de tutoriales Cómo crear un sitio web con CSS .
• Un navegador web moderno que admite border-image, linear-gradient, radial-gradient, y conic-gradient.

Estableciendo el ejemplo

Primero, considere una boxclase que establece algunas dimensiones y centra el contenido:

.box {  width: 400px;  height: 200px;  max-width: 100%;  margin: 1rem auto;  display: flex;  align-items: center;  justify-content: center;  font-size: 2rem;}

A continuación, utilice esta clase en un divelemento:

div  Example box without a border./div

Ahora, puedes crear una nueva with-borderclase:

.with-border {  border-color: black;  border-style: solid;  border-width: 30px;}

Luego, agréguelo al marcado:

div  Example box with a border./div

Este código mostrará lo siguiente:

Ejemplo de cuadro con borde.

A continuación, desarrollarás este ejemplo con imágenes de borde y bordes degradados.

Uso de imágenes de borde

Primero, crea una nueva with-border-imageclase:

.with-border-image {  border-style: solid;  border-width: 20px;  border-image-source: url(/url/to/some/fancy/image.jpg);  border-image-slice: 60 30;}

Notarás que aún es necesario aplicar un borde regular al elemento porque la imagen del borde reemplaza el estilo del borde regular.

border-image-sourceespecifica la imagen de origen, que puede ser una URL a una imagen rasterizada o basada en vectores (SVG) o una URI de datos.

border-image-sliceSe refiere a un proceso de corte que divide una imagen en nueve regiones. Al definir hasta cuatro valores, se determina qué parte de las imágenes se repetirá como parte del borde.

Luego, agréguelo al marcado:

div  Example box with a border image./div

Este código mostrará lo siguiente:

Ejemplo de cuadro con imagen de borde.

Si quieres aventurarte a comprenderlo en profundidad border-image-slice, aquí tienes un fantástico artículo de referencia de Codrops y otro artículo de CSS-Tricks.

Uso de la propiedad abreviada

Hay una propiedad abreviada para especificar los valores para ambos border-image-sourcey border-image-slicetodos a la vez: border-image.

Recuerde cómo en el ejemplo anterior se utilizaron propiedades separadas:

.with-border-image {  border-style: solid;  border-width: 20px;  border-image-source: url(/url/to/some/fancy/image.jpg);  border-image-slice: 60 30;}

Este es el mismo ejemplo reescrito con la propiedad abreviada:

.with-border-image {  border-style: solid;  border-width: 20px;  border-image: url(/url/to/some/fancy/image.jpg) 60 30;}

Estos valores son equivalentes.

Uso de bordes degradados

Hay tres tipos de gradientes admitidos: lineal, radial y cónico. En el caso de los gradientes, deberá especificar un border-image-slicevalor de 1.

Usando un degradado lineal

Aquí hay un gradiente lineal :

.with-linear-gradient {  border-style: solid;  border-width: 10px;  border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;}

Agregue esto a su marcado. Este código mostrará lo siguiente:

Ejemplo de cuadro con degradado lineal.

Ahora tienes un elemento con un degradado lineal usando linear-gradient.

Usando un gradiente radial

A continuación se muestra un ejemplo de un gradiente radial :

.with-radial-gradient {  border-style: solid;  border-width: 10px;  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;}

Agregue esto a su marcado. Este código mostrará lo siguiente:

Ejemplo de cuadro con degradado radial.

Ahora tienes un elemento con un degradado lineal usando radial-gradient.

Usando un gradiente cónico

He aquí un ejemplo de un gradiente cónico :

.with-conic-gradient {  border-style: solid;  border-width: 10px;  border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;}

Agregue esto a su marcado. Este código mostrará lo siguiente:

Ejemplo de caja con gradiente cónico.

Ahora tienes un elemento con un degradado lineal usando conic-gradient.

Conclusión

En este artículo, exploraste border-image-sourcey border-image-slice.

A partir de 2020, Can I Useborder-image? muestra que el 99 % de los navegadores de todo el mundo admiten la border-imagepropiedad. Tenga en cuenta el uso del navegador de su público objetivo al adoptar nuevas funciones.

Lamentablemente, todavía border-imageno funciona como se esperaba border-radius. Si desea que su elemento tenga un radio de borde y un borde degradado, puede que le interesen estos enfoques que utilizan elementos anidados con background-imagey background-colorpara dar la ilusión de un degradadoborder-image .

Si desea obtener más información sobre CSS, consulte nuestra página de temas de CSS para obtener ejercicios y proyectos de programación.