Propriété CSS column-rule

La propriété abrégée column-rule définit le style, la largeur et la couleur de la règle entre les colonnes. Notez qu'elle ne s'affiche que lorsque column-count ou columns est défini sur l'élément. Elle est spécifiée par les propriétés suivantes :

Si la propriété column-rule-color n'est pas définie, elle prend par défaut currentColor. Comme les autres propriétés abrégées, si une valeur n'est pas spécifiée, elle est définie à sa valeur initiale.

La propriété column-rule fait partie des propriétés CSS3.

Valeur initiale	medium (largeur), none (style), currentColor (couleur)
S'applique à	Conteneurs de blocs qui établissent une mise en page multi-colonnes. Elle s'applique également à `::first-letter`.
Héritée	Non.
Animable	Oui. La couleur et la largeur de la règle de colonne sont animables.
Version	CSS3
Syntaxe DOM	object.style.columnRule = "5px outset #ccc";

Syntaxe

Syntaxe de la propriété CSS column-rule

css

column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

Remarque : l'ordre des valeurs de largeur, de style et de couleur est flexible dans la propriété abrégée.

Exemple de la propriété column-rule :

Exemple avec des valeurs de largeur, de style et de couleur

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule: 5px dotted #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule example</h1>
    <p>Here the column-rule is set to 5px dotted gray.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Résultat

Propriété CSS column-rule

Si une seule valeur est fournie, elle est interprétée comme le column-rule-style.

Exemple de la propriété column-rule avec une seule valeur :

Exemple avec une seule valeur

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule example</h2>
    <p>Here the column-rule is set to only "dashed".</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété column-rule avec une largeur, un style et une couleur spécifiés :

Exemple avec toutes les valeurs spécifiées

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: 30px;
        column-rule: 10px groove #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule example</h2>
    <p>Here the column-rule is set to 10px groove gray.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
column-rule-width	Définit la largeur de la règle entre les colonnes. La valeur par défaut est "medium".
column-rule-style	Définit le style de la règle entre les colonnes. La valeur par défaut est "none".
column-rule-color	Définit la couleur de la règle. La valeur par défaut est la couleur actuelle de l'élément.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Practice

Quelle est la fonction de la propriété 'column-rule' en CSS ?

Elle spécifie la largeur, le style et la couleur de la règle entre les colonnesElle ajoute de l'espace entre les colonnesElle définit le nombre de colonnesElle définit la marge intérieure autour des colonnesElle détermine la mise en page des colonnes

Propriété CSS column-rule ​

Syntaxe ​

Exemple de la propriété column-rule : ​

Exemple avec des valeurs de largeur, de style et de couleur ​

Résultat ​

Exemple de la propriété column-rule avec une seule valeur : ​

Exemple avec une seule valeur ​

Exemple de la propriété column-rule avec une largeur, un style et une couleur spécifiés : ​

Exemple avec toutes les valeurs spécifiées ​

Valeurs ​

Practice ​

Propriété CSS column-rule

Syntaxe

Exemple de la propriété column-rule :

Exemple avec des valeurs de largeur, de style et de couleur

Résultat

Exemple de la propriété column-rule avec une seule valeur :

Exemple avec une seule valeur

Exemple de la propriété column-rule avec une largeur, un style et une couleur spécifiés :

Exemple avec toutes les valeurs spécifiées

Valeurs

Practice