Imagen de borde - Trucos CSS

border-image es una propiedad abreviada que le permite utilizar una imagen o un degradado CSS como borde de un elemento.

.module ( border-image: url(border.png.webp) 25 25 round; )

La border-imagepropiedad se puede aplicar a cualquier elemento, excepto a los elementos internos de la tabla (por ejemplo, tr, th, td) cuando border-collapsese establece en collapse.

Propiedades

La única propiedad requerida para la border-imagetaquigrafía es border-image-source. Las otras propiedades tienen por defecto sus valores iniciales si no se especifican. Estas son las border-imagepropiedades en orden:

border-image-source

.module ( border-image-source: url(border.png.webp); )

Esta propiedad especifica el origen de la imagen del borde. Puede ser una URL, un URI de datos, un degradado CSS o un SVG en línea (aunque el soporte es limitado para SVG en línea, consulte las notas de uso de SVG).

El valor inicial es none.

border-image-slice

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Los valores de esta propiedad le dicen al navegador dónde "cortar" la imagen para crear las piezas del borde. La imagen está dividida en 9 secciones: las cuatro esquinas, los cuatro lados y el centro.

Si crees que eso suena ridículo, estás en buena compañía. Hace unos años hubo una larga discusión sobre el tema en el blog de Eric Myer, donde intervinieron muchos grandes del desarrollo de frontend.

En esta demostración, un corazón se repite alrededor del borde del div. La border-image-sourceimagen es una imagen compuesta de ocho del mismo icono de corazón, cortado de modo que se use la forma de corazón completo en cada lado del elemento.

Vea la demostración de imagen de borde de lápiz: borde de icono de CSS-Tricks (@ css-tricks) en CodePen.

Más notas de uso

Aunque el soporte para border-imageha mejorado, es compatible sin prefijos en todas las versiones actuales del navegador, borderaún vale la pena establecer un estilo alternativo . Su borde de respaldo se mostrará en los navegadores que no son compatibles border-imageo si la imagen no se carga.

A diferencia de algunas de las otras propiedades del borde, border-imageno se puede animar. Tampoco se puede diseñar con border-radius.

Si declara un ancho border-image-sourcey un borderancho o border-image-widthsin cortes, toda la imagen sin cortes se colocará en las cuatro esquinas del elemento, escalada al ancho especificado.

Relacionado

• border
• border-collapse
• box-sizing

Más información

• border-image en el Módulo de Fondo y Fronteras CSS Nivel 3 CR
• border-image en MDN
• border-image.com, esta herramienta te permite cargar una imagen y jugar con los cortes del borde hasta que los entiendas bien, luego genera el CSS por ti.
• Imagen de borde explicada de Dudley Storey.

Más demostraciones

• También de Dudley Storey, Practical border-image: responsive picture frame, una demostración de CodePen. Este es un buen ejemplo de cómo usar una imagen de borde con sensatez en una imagen sensible. Observe que el "marco" se elimina en tamaños de pantalla más pequeños.
• Bordes de puntos reales utilizando SVG e imagen de borde, un lápiz de Lucas Lemonnier. Una solución para el borde cuadrado "punteado" feo, este método le da puntos redondos reales!
• botón de degradado, un lápiz del usuario de CodePen GSSxGSS. Un bonito ejemplo de un degradado lineal como imagen de borde.
• Film Strip, una pluma de Nick Pettit. Quizás no sea la demostración más práctica, este es un ejemplo artístico y divertido de lo que puede hacer border-image.

Soporte del navegador

border-imageoriginalmente requería prefijos de proveedores en todos los navegadores que lo admitían. Ahora funciona sin prefijo en la última versión de todos los navegadores. Esta tabla muestra tanto el soporte con prefijo más antiguo como el soporte sin prefijo más antiguo cuando corresponda.

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
7 *, 16	3 *, 6	3,5 †, 15	10,5, 15 ‡	11	2,1 *, 4,4	3,2 *, 6

* con -webkitprefijo.
† con -mozprefijo.
‡ Serie 10.5 - 14 con -oprefijo; fillLa palabra clave no se admite en ninguna versión.