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é CSS border-image-outset définit la distance de dépassement de l'image de bordure d'un élément par rapport à sa boîte de bordure.
Les parties de l'image de bordure qui sont affichées en dehors de la boîte de bordure de l'élément avec border-image-outset ne déclenchent pas de barres de défilement d'overflow et ne capturent pas les évènements de souris.
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">Ceci est une boîte entourée d'une bordure.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: black;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
Syntaxe
/* Valeurs de type <length> */
border-image-outset: 1rem;
/* Valeurs de 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: revert-layer;
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>-
La taille du dépassement de l'image de bordure en tant que dimension — un nombre avec une unité.
<number>-
La taille du dépassement de l'image de bordure en tant que multiple des largeurs des bordures (
border-width) correspondantes de l'élément. Par exemple, si un élément aborder-width: 1em 2px 0 1.5remetborder-image-outset: 2, la valeur finale deborder-image-outsetsera calculée comme2em 4px 0 3rem.
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: #cceeff;
border: 1.4rem solid;
border-image: radial-gradient(#ffff22, #5555ff) 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 |