border-image

Resumen

La propiedad de CSS border-image permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.

La propiedad border-image es usada en lugar de la sentencia border-style. Por eso es muy importante tener en cuenta el valor dado por la sentencia border-image-source (en-US), que se puede establecer ya sea por la propiedad border-image-source o la abreviatura border-image, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.

Valor inicial	as each of the properties of the shorthand: border-image-source (en-US): `none` `border-image-slice`: `100%` border-image-width (en-US): `1` `border-image-outset`: `0` `border-image-repeat`: `stretch`
Applies to	all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`.
Heredable	no
Percentages	as each of the properties of the shorthand: `border-image-slice`: refer to the size of the border image border-image-width (en-US): refer to the width or height of the border image area
Valor calculado	as each of the properties of the shorthand: `border-image-outset`: as specified, but with relative lengths converted into absolute lengths `border-image-repeat`: como se especifica `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified border-image-source (en-US): `none` or the image with its URI made absolute border-image-width (en-US): as specified, but with relative lengths converted into absolute lengths
Animation type	discrete

Sintaxis

Etiquetado formal: <'border-image-source'> (en-US) || (en-US) <'border-image-slice'> [ (en-US) / <'border-image-width'> (en-US) | (en-US) / <'border-image-width'> (en-US)? (en-US) / <'border-image-outset'> ] (en-US)? (en-US) || (en-US) <'border-image-repeat'>

.example {
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

Resultado:
border image repeat demo

Bitmap repeated (round)

La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.

.example {
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

Resultado:
border image round demo

Bitmap stretched

La opción 'stretch' estira la imágen para rellenar todo el borde del área

.example {
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

Resultado:
border image stretch demo

Especificaciones

Especificación	Estado	Comentarios
CSS Backgrounds and Borders Module Level 3 La definición de 'border-image' en esta especificación.	Candidate Recommendation

Compatibilidad de navegadores

BCD tables only load in the browser