Attribut border-image-source

Rôle

L’attribut border-image-source permet de spécifier la source de l’image.

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.borderImageSource

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

body{
    padding: 10px;
}
div{
    background-color:silver;
    width: 310px;
    height: 100px;
    padding: 20px;
    border: solid 10px transparent;
    border-image-source: url(//tutowebdesign.com/images/border-image-css.jpg);
    border-image-width: 20px;
    border-image-repeat: round;
    border-image-slice: 30 40;
    border-image-outset: 0;
}

– Le code HTML

<section></section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maxime et reiciendis ullam,</div>
<img src="//tutowebdesign.com/images/border-image-repeat-css.jpg" alt="">

Résultat

Compatibilité

 15.0+  15.0+  11.0+  6.0+  15.0+
L’attribut border-image-source est pris en charge par les versions récentes des principaux navigateurs.

Valeurs

Les différentes valeurs de l’attribut border-image-source sont:

la source

La source de l’image
Syntaxe :
border-image-source : url(images/border-image-css.jpg)

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
border-image-repeat : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
border-image-repeat : inherit

A voir aussi

border-image-repeat box-sizing clip height width margin paddingoverflow max-width min-width outline resize