Attribut border-image-outset

Rôle

L’attribut border-image-outset permet d’étendre la bordure au delà du bord du conteneur HTML.

Cet attribut peut prendre plusieurs valeurs possibles :

* 4 valeurs pour pouvoir gérer les extensions des bordures séparément

border-image-outset : 10px 20px 10px 20px ;

* 3 valeurs : la quatrième valeur (bordure de gauche) a la même valeur que la deuxième valeur (bordure de droite)border-image-outset : 10px 20px 10px ;

* 2 valeurs : la première pour les bordures haut-bas, la deuxième pour les bordures droite-gauche

border-image-outset : 10px 20px ;

* 1 même valeur pour les quatres borduresborder-image-outset : 10px ;

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.borderImageWidth

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-outset: 20px;
    border-image-repeat: round;
    border-image-outset: 30 40;
    border-image-outset: 5px;
}

– 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-outset-css.jpg" alt="">

Résultat

La bordure rouge représente les bords du conteneur HTML

Compatibilité

 15.0+  15.0+  11.0+  6.0+  15.0+

L’attribut border-image-outset est pris en charge par les versions récentes des principaux navigateurs

Valeurs

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

length

la distance par rapport au bord. La valeur par défaut est 0
Syntaxe :
border-image-outset : 20px

nombre

Valeur par défaut 1. Un nombre qui correspond à un multiple d’une largeur de bordure spécifié
Syntaxe :
border : 20px solid transparent; border-image-outset : 1 2

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-outset : initial

inherit

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

A voir aussi

box-sizing clip height width margin padding overflow max-widthmin-width outline resize