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 inicialas each of the properties of the shorthand:
Applies toall elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Heredableno
Percentagesas each of the properties of the shorthand:
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete

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'>

Valores

A continuación vea las respectivas propiedades para los diferentes valores.

Ejemplos

Bitmap repeated (repeat)

La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.

.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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support

3.5 (1.9.1)-moz (en-US) [1]

Without prefix since 15 (15)

7.0-webkit (en-US)

Without prefix since 16.0

11

10.5 / 11.0-o (en-US) [2]

Without prefix since 15.0

3.0-webkit (en-US)

Without prefix since 6.0
optional <border-image-slice> 15 (15) ? ? ? ?
fill keyword 15 (15) Yes ? Sin soporte Yes (6)
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support

3.2-webkit (en-US)

Without prefix since 15.0 (15)

 Sin soporte 11.0-o (en-US) 2.1-webkit (en-US)
optional <border-image-slice> 15.0 (15) Sin soporte ? ?
fill keyword 15.0 (15) Sin soporte Sin soporte Yes(18)
  • [1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.
  • [2] For Opera, the prefixed property was added after the non-prefixed.