border-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

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, 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 typeas each of the properties of the shorthand:

Sintaxis

Etiquetado formal: 
border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>                             

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

<border-image-width> = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<border-image-outset> = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}  

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

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.

css
.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.

css
.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

css
.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

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image

Compatibilidad con navegadores