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.

* Learn more
* See full compatibility
* Report feedback
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'>                               
  
```


```
### 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](/files/4129/repeat.png)

### 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](/files/4131/round.png)

### 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](/files/4133/stretch.png)

Especificaciones
----------------

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

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.