Ejemplo
Especificar una imagen como la frontera alrededor de un elemento:
#borderimg
{
border-image-source: url(border.png);
}
Inténtalo tú mismo " Definición y Uso
Entre las opciones de imagen de código frontera especifica la ruta a la imagen para ser utilizado como una frontera (instead of the normal border around an element) .
Tip: Si el valor es "none" , o si la imagen no se puede visualizar, se utilizará los estilos de borde.
Consejo: También mirar la imagen frontera propiedad (a shorthand property for setting all the border-image-* properties) .
| Valor por defecto: | none |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.borderImageSource="url(border.png)" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| border-image-source | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
sintaxis CSS
border-image-source: none|image|initial|inherit;Valores de propiedad
| Valor | Descripción |
|---|---|
| none | se utilizará ninguna imagen |
| image | La ruta a la imagen que se utilizará como una frontera |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS3 tutorial: Imágenes CSS3 Frontera
CSS de referencia: border-image property
CSS Referencia: border-image-outset property
CSS Referencia: border-image-repeat property
CSS de referencia: border-image-slice property
CSS Referencia: border-image-width property
Referencia HTML DOM: borderImageSource property