Propiedad de imagen de borde CSS

❮ Anterior Referencia completa de CSS Siguiente ❯

Ejemplo

Especifique una imagen como borde alrededor de un elemento:

#borderimg {
border-image: url(border.png) 30 round;
}

Más ejemplos de "Pruébelo usted mismo" a continuación.

Definición y uso

La border-imagepropiedad le permite especificar una imagen para usarla como borde alrededor de un elemento.

La propiedad border-image es una propiedad abreviada para:

Los valores omitidos se establecen en sus valores predeterminados.

Valor por defecto:	ninguno 100% 1 0 estiramiento
Heredado:	No
Animable:	No. Leer sobre animable
Versión:	CSS3
Sintaxis de JavaScript:	objeto .style.borderImage="url(border.png) 30 vueltas"

Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Los números seguidos de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.

Property
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Nota: consulte el soporte de navegador individual para cada valor a continuación.

Sintaxis CSS

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

Valores de propiedad

Value	Description	Play it
border-image-source	The path to the image to be used as a border
border-image-slice	How to slice the border image
border-image-width	The width of the border image
border-image-outset	The amount by which the border image area extends beyond the border box
border-image-repeat	Whether the border image should be repeated, rounded or stretched
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Más ejemplos

Ejemplo

Diferentes valores de corte cambian completamente el aspecto del borde:

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}