Con la propiedad CSS border-image, puedes configurar una imagen para usarla como borde alrededor de un elemento.
La propiedad CSS border-image
La propiedad CSS border-image permite especificar una imagen para usar en lugar del borde normal alrededor de un elemento.
La propiedad tiene tres partes:
- La imagen a usar como borde
- Dónde cortar la imagen
- Define si las secciones intermedias deben repetirse o estirarse
La propiedad border-image toma la imagen y la divide en nueve secciones, como un tablero de tres en raya. Luego coloca las esquinas en las esquinas y las secciones centrales se repiten o se estiran según lo especifique.
Nota: Para que la imagen de borde funcione, el elemento también necesita que se establezca la propiedad de borde.
Aquí, las secciones centrales de la imagen se repiten para crear el borde:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<h1>La propiedad border-image</h1>
<p>Aquí, las secciones centrales de la imagen se repiten para crear el borde:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>
<p>Esta es la imagen original:</p><img src="border.png">
<p><strong>Ojo:</strong> Internet Explorer 10 y versiones anteriores
no admiten la propiedad border-image.</p>
</body>
</html>
Sugerencia: La propiedad border-image es en realidad una propiedad abreviada para las propiedades border-image-source, border-image-slice, border-image-width, border-image-outset y border-image-repeat.
Resumen
| Propiedad | Descripción |
|---|---|
| border-image | Una propiedad abreviada para configurar todas las propiedades border-image-* |
| border-image-source | Especifica la ruta a la imagen que se usará como borde |
| border-image-slice | Especifica cómo cortar la imagen del borde |
| border-image-width | Especifica los anchos de la imagen del borde. |
| border-image-outset | Especifica la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde. |
| border-image-repeat | Especifica si la imagen del borde debe repetirse, redondearse o estirarse |