border-image-outset
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété border-image-outset définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.
Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'évènements de pointeur par rapport à l'élément concerné.
Exemple interactif
border-image-outset: 0;
border-image-outset: 15px;
border-image-outset: 30px;
border-image-outset: 40px;
<section id="default-example">
<div id="example-element">This is a box with a border around it.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: #000;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
Syntaxe
/* Longueur */
/* Type <length> */
border-image-outset: 1rem;
/* Valeur numérique */
/* Type <number> */
border-image-outset: 1.5;
/* côtés verticaux | horizontaux */
border-image-outset: 1 1.2;
/* haut | côtés horizontaux | bas */
border-image-outset: 30px 2 45px;
/* haut | droit | bas | gauche */
border-image-outset: 7px 12px 14px 5px;
/* Valeurs globales */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: unset;
La propriété border-image-outset peut être définie à l'aide d'une, deux, trois ou quatre valeurs. Chaque valeur est une longueur (<length>) ou un nombre (<number>). Les valeurs négatives sont invalides (la déclaration est alors ignorée).
- Si une valeur est indiquée, elle s'applique aux quatre côtés.
- Si deux valeurs sont indiquées, la première s'applique aux côtés haut et bas et la seconde s'applique aux côtés gauche et droit.
- Si trois valeurs sont indiquées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit, et la troisième au côté bas.
- Si quatre valeurs sont indiquées, elles s'appliquent dans le sens des aiguilles d'une montre : la première au côté haut, la seconde au côté droit, la troisième au côté bas, et la quatrième au côté gauche.
Valeurs
<length>-
Une valeur de longueur (cf. type
<length>) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées. <number>-
Une valeur numérique (cf. type
<number>) qui sera multipliée par la valeur calculée deborder-widthafin de déterminer la longueur de l'espace duquel dépasser.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | tous les éléments sauf les éléments de table internes lorsque border-collapse vaut collapse. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | by computed value type |
Syntaxe formelle
border-image-outset =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
Exemples
Décaler la bordure d'une image
HTML
<div id="outset">Un élément avec une bordure décalée !</div>
CSS
#outset {
width: 10rem;
background: #cef;
border: 1.4rem solid;
border-image: radial-gradient(#ff2, #55f) 40;
border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
margin: 2.1rem;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-outset |
Compatibilité des navigateurs
Chargement…