Definición de .border-image utilizado en CSS
.border-image es una propiedad abreviada que le permite usar un gradiente de imagen o CSS como el borde de un elemento.
Caso de empleo de border-image
Si te gustaría emplear esta propiedad de CSS en tu stylesheet, hazlo de la siguiente manera:
.element {
border-image: url(border.png) 25 25 round;
}Otro ejemplo más avanzado de .border-image es el siguiente de CODEPEN:
Sintaxis de .border-image en CSS
border-image: source slice width outset repeat|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| La ruta a la imagen que se utilizará como borde. | ||
| Cómo cortar la imagen del borde | ||
| El ancho de la imagen del borde. | ||
| La cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde | ||
| Si la imagen del borde debe repetirse, redondearse o estirarse | ||
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .border-image
Los números de la tabla detallan la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
Referencias técnicas
- CSS Background and Borders Module Level 3 (Candidate Recommendation)
- border-image.com: This tool lets you upload an image and play with the border slices until you get them right, then it generates the CSS for you.
- Border Image Explained (Dudley Storey)
