Propriété CSS box-decoration-break

La propriété CSS box-decoration-break spécifie comment le background, le padding, la border, la border-image, le box-shadow, la margin et le clip-path d'un élément sont appliqués lorsque la boîte est fragmentée — c'est-à-dire divisée sur plusieurs lignes, colonnes ou pages.

Cette page explique ce que signifie la fragmentation, en quoi les deux valeurs (slice et clone) diffèrent, dans quels cas utiliser cette propriété, et comment l'employer avec des exemples concrets.

Qu'est-ce qu'une boîte fragmentée ?

Une boîte est fragmentée lorsqu'elle ne peut pas être dessinée comme un seul rectangle continu. Le cas le plus courant est un élément en ligne tel qu'un <span> dont le texte se répartit sur plusieurs lignes, mais la fragmentation se produit aussi lors des sauts de colonne (dans une mise en page multi-colonnes) et lors des sauts de page à l'impression.

Par défaut, les navigateurs traitent l'ensemble de l'élément comme une seule boîte et ne la découpent qu'aux bords des lignes. Cela signifie que les décorations telles que la bordure ou le border-radius sont dessinées une seule fois pour l'ensemble de l'élément, puis découpées — ainsi les coins arrondis et les bordures gauche/droite n'apparaissent qu'au tout début et à la toute fin du texte, et non sur chaque ligne. box-decoration-break vous permet de modifier ce comportement.

La propriété box-decoration-break possède deux valeurs principales :

slice (la valeur par défaut) applique les décorations à l'ensemble de l'élément comme s'il n'était pas fragmenté, puis découpe la boîte aux bords de chaque fragment. Les coins, les bordures et les arrière-plans sont « coupés » là où la ligne se wrape.
clone applique chaque décoration à chaque fragment de manière indépendante. Les bordures entourent les quatre côtés de chaque fragment, le border-radius est répété sur chaque fragment, et l'arrière-plan est entièrement redessiné pour chacun.

Un moyen facile de s'en souvenir : slice = une boîte découpée en morceaux ; clone = chaque morceau est sa propre boîte complète.

Quand l'utiliser

Utilisez box-decoration-break: clone lorsque vous souhaitez qu'un élément en ligne décoré ait un aspect cohérent sur chaque ligne. Les scénarios courants incluent :

Texte surligné / style « surligneur » où chaque ligne enveloppée doit conserver ses coins arrondis et son padding.
Styles de pastille ou de badge appliqués à des liens ou des balises en ligne susceptibles de se répartir sur plusieurs lignes.
Mises en page multi-colonnes ou imprimées où un élément avec une bordure franchit un saut de colonne ou de page, et vous souhaitez une bordure complète sur chaque fragment plutôt qu'une bordure ouverte.

Valeur initiale	slice
S'applique à	Tous les éléments (et, conceptuellement, à chaque fragment de boîte).
Hérité	Non.
Version	CSS3
Syntaxe DOM	object.style.boxDecorationBreak = "clone";

Syntaxe

Syntaxe de la propriété CSS box-decoration-break

box-decoration-break: slice | clone | initial | inherit | unset;

Voici un exemple avec la valeur clone, où les décorations s'appliquent à chaque fragment comme si les fragments étaient des éléments individuels.

Exemple de la propriété CSS box-decoration-break avec la valeur clone

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #1c87c9;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
      }
      span.box {
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>Here the box-decoration-break is set to "clone".</p>
    <span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Essayez vous-même »

Résultat

Les navigateurs modernes prennent en charge cette propriété nativement sans préfixes, mais le préfixe -webkit- est inclus dans les exemples pour la compatibilité avec les navigateurs plus anciens.

Voyons maintenant un autre exemple où la valeur slice est appliquée à la boîte. Ici, la boîte est découpée en morceaux.

Exemple de la propriété CSS box-decoration-break avec la valeur slice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #8ebf42;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
        background-color: #ccc;
      }
      span.box {
        -webkit-box-decoration-break: slice;
        box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>
      Here the box-decoration-break is set to "slice" which is the default value of this property.
    </p>
    <span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Essayez vous-même »

Résultat

Voyons maintenant comment une ombre de boîte est appliquée à la boîte découpée.

Exemple de la propriété CSS box-decoration-break avec la valeur slice et une ombre

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #8ebf42;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
        background-color: #cccccc;
        box-shadow: 5px 4px 10px #666666;
        box-decoration-break: slice;
        -webkit-box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>
      Here the box-decoration-break is set to "slice" which is the default value of this property.
    </p>
    <span>Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Essayez vous-même »

Résultat

Valeurs

Valeur	Description
slice	Les décorations de boîte s'appliquent à l'ensemble de l'élément et sont coupées aux bords des fragments de l'élément.
clone	Les décorations de boîte s'appliquent à chaque fragment individuellement.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite de la propriété de son élément parent.
unset	Se comporte comme `inherit` si la propriété est héritée, sinon comme `initial`.

Compatibilité des navigateurs et préfixes

box-decoration-break est prise en charge dans tous les navigateurs modernes. Firefox prend en charge la propriété sans préfixe ; Chrome, Edge, Safari et les autres navigateurs WebKit/Blink nécessitaient historiquement le préfixe -webkit-box-decoration-break, il est donc recommandé de déclarer les deux :

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Placez toujours la propriété préfixée avant la propriété standard afin que la déclaration sans préfixe ait la priorité là où elle est prise en charge.

Propriétés associées

box-shadow — ajoute des ombres que cette propriété peut cloner par fragment.
border-radius — coins arrondis que clone répète sur chaque ligne.
CSS columns — mises en page multi-colonnes où la fragmentation se produit.
padding et margin — l'espacement affecté par la fragmentation.

Exercice

Pratique

Que fait la propriété CSS box-decoration-break ?

Elle définit comment le background, les bordures, l'ombre, etc. d'un élément doivent être affichés dans un format en ligne.Elle définit comment la police et le texte d'un élément doivent être affichés.Elle contrôle la façon dont la boîte d'un élément est décorée lorsqu'elle s'étend sur plusieurs lignes.Elle détermine la couleur de la boîte de l'élément.