Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

column-rule

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 mars 2017.

La propriété raccourcie CSS column-rule définit la largeur, le style et la couleur de la ligne tracée entre les colonnes dans une mise en page multi-colonnes.

Exemple interactif

column-rule: dotted;
column-rule: solid 6px;
column-rule: solid blue;
column-rule: thick inset blue;
<section id="default-example">
  <p id="example-element">
    Londres. Le trimestre de Michaelmas venait de se terminer, et le lord
    chancelier siégeait dans la salle de Lincoln's Inn. Un novembre implacable.
    Tant de boue dans les rues comme si les eaux venaient tout juste de se
    retirer de la surface de la terre, et il ne serait pas étonnant de
    rencontrer un Megalosaurus, quarante pieds de long environ, se dandinant
    comme un lézard éléphantesque en montant Holborn Hill.
  </p>
</section>
#example-element {
  columns: 3;
  column-rule: solid;
  text-align: left;
}

Propriétés constituantes

Cette propriété est une propriété raccourcie regroupant les propriétés CSS suivantes :

Syntaxe

css
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

/* Valeurs globales */
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;

Valeurs

<'column-rule-width'>

Une valeur de longueur (<length>) ou l'un des mots-clés thin, medium ou thick. Pour plus de détails, voir border-width.

<'column-rule-style'>

Voir border-style pour les différentes valeurs possibles.

<'column-rule-color'>

Une valeur de couleur (<color>).

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitééléments sur plusieurs colonnes
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

column-rule = 
<gap-rule-list> |
<gap-auto-rule-list>

<gap-rule-list> =
<gap-rule-or-repeat>#

<gap-auto-rule-list> =
<gap-rule-or-repeat>#? , <gap-auto-repeat-rule> , <gap-rule-or-repeat>#?

<gap-rule-or-repeat> =
<gap-rule> |
<gap-repeat-rule>

<gap-auto-repeat-rule> =
repeat( auto , <gap-rule># )

<gap-rule> =
<line-width> ||
<line-style> ||
<color>

<gap-repeat-rule> =
repeat( <integer [1,∞]> , <gap-rule># )

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

<integer> =
<number-token>

Exemples

Exemple 1

css
/* Équivaut à "medium dotted currentColor" */
p.toto {
  column-rule: dotted;
}

/* Équivaut à "medium solid blue" */
p.tata {
  column-rule: solid blue;
}

/* Équivaut à "8px solid currentColor" */
p.tutu {
  column-rule: solid 8px;
}

p.abc {
  column-rule: thick inset blue;
}

Exemple 2

HTML

html
<p class="content-box">
  Il s'agit d'un bloc de texte réparti en trois colonnes. Notez comment la
  propriété `column-rule` sert à ajuster le style, la largeur et la couleur de
  la règle qui apparaît entre les colonnes.
</p>

CSS

css
.content-box {
  padding: 0.3em;
  background: #ffff77;
  column-count: 3;
  column-rule: inset 2px #3333ff;
}

Résultat

Spécifications

Specification
CSS Multi-column Layout Module Level 1
# column-rule

Compatibilité des navigateurs

Voir aussi