CSS3 border-image Property

Ejemplo

Especificar una imagen como la frontera alrededor de un elemento:

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

La propiedad border-image le permite especificar una imagen para ser utilizada en lugar de la frontera normal alrededor de un elemento.

La propiedad border-image es una propiedad abreviada para establecer las fronteras de imagen de código , frontera-imagen-rebanada , frontera imagen de ancho , con las fronteras de imágenes primer momento y frontera-imagen-repetición propiedades.

los valores omitidos se establecen en sus valores por defecto.

Valor por defecto:	none 100% 1 0 stretch
Heredado:	no
animatable:	no. Read about animatable
Versión:	CSS3
la sintaxis de JavaScript:	object .style.borderImage="url(border.png) 30 round" Try it

Soporte para el 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 por -webkit-, -moz-, o -O- especifican la primera versión que funcionaba con un prefijo.

Propiedad
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 la ayuda del navegador individual para cada valor por debajo.

sintaxis CSS

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

Valores de propiedad

Valor	Descripción	Juegalo
border-image-source	La ruta a la imagen que se utilizará como una frontera
border-image-slice	Cómo cortar la imagen Frontera	Juegalo "
border-image-width	La anchura de la imagen de la frontera
border-image-outset	La cantidad en que el área de la imagen frontera se extiende más allá del borde de cuadro
border-image-repeat	Si la imagen de la frontera se debe repetir, redondeada o alargada	Juegalo "
initial	Establece esta propiedad a su valor por defecto. Lea acerca inicial
inherit	Hereda esta propiedad de su elemento padre. Lee sobre heredar

Más ejemplos

Ejemplo

Diferentes valores rebanada cambia por completo el aspecto de la frontera:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

Inténtalo tú mismo "