border-image

Baseline

Ampliamente disponible

Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.

Ver la compatibilidad completa
Más información

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 inicial	as each of the properties of the shorthand: `border-image-source`: `none` `border-image-slice`: `100%` `border-image-width`: `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`: refer to the width or height of the border image area
Valor calculado	as each of the properties of the shorthand: `border-image-source`: `none` or the image with its URI made absolute `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified `border-image-width`: as specified, but with relative lengths converted into absolute lengths `border-image-outset`: as specified, but with relative lengths converted into absolute lengths `border-image-repeat`: como se especifica
Animation type	as each of the properties of the shorthand: `border-image-source`: discrete `border-image-slice`: by computed value type `border-image-width`: by computed value type `border-image-outset`: by computed value type `border-image-repeat`: discrete

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>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  
Esta sintaxis refleja el estándar más reciente según CSS Borders and Box Decorations Module Level 4, CSS Images Module Level 4, CSS Images Module Level 5, CSS Values and Units Module Level 4, Selectors Level 4. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener información de soporte.

.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