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 inicial | as each of the properties of the shorthand: |
---|---|
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:
|
Valor calculado | as each of the properties of the shorthand:
|
Animation type | discrete |
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:
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:
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:
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
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support |
3.5 (1.9.1)-moz (en-US) [1] Without prefix since 15 (15) |
Without prefix since 16.0 |
11 |
10.5 / 11.0-o (en-US) [2] Without prefix since 15.0 |
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 |
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.