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 (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	as each of the properties of the shorthand: `border-image-outset`: by computed value type `border-image-repeat`: discrete `border-image-slice`: by computed value type `border-image-source` (en-US): discrete `border-image-width` (en-US): by computed value type

Sintaxis

Etiquetado formal: border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'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.

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

BCD tables only load in the browser