Atributo border-image CSS

Definición y uso

La propiedad border-image es una propiedad abreviada que se utiliza para configurar las siguientes propiedades:

Si se omite el valor, se establecerá el valor predeterminado.

Consejo:¡Use las propiedades border-image-* para crear botones elegantes y ajustables!

Véase también:

Tutoriales de CSS3:Borde de CSS3

Ejemplo

Definir la imagen como el borde que rodea al elemento div:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Inténtalo tú mismo

Hay más ejemplos en la parte inferior de la página.

Sintaxis de CSS

border-image: source slice width outset repeat|initial|inherit;

Valor del atributo

Valor Descripción Pruebas
border-image-source Ruta de la imagen utilizada en el borde.
border-image-slice Desplazamiento hacia adentro del borde de imagen.
border-image-width Ancho del borde de imagen.
border-image-outset La cantidad de borde de imagen que sobrepasa el borde.
border-image-repeat Si el borde de imagen debe repetirse (repeated), estar redondeado (rounded) o estirarse (stretched). Pruebas

Detalles técnicos

Valor predeterminado: none 100% 1 0 stretch
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.borderImage="url(border.png) 30 30 round"

Más ejemplos

Botón con borde de imagen
Este ejemplo muestra cómo crear un botón mediante la propiedad border-image.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-