w3docs logo

Propriété CSS column-rule-style

La propriété column-rule-style définit le style du règle entre les colonnes. Column-rule est similaire à une bordure, que vous pouvez ajouter pour séparer les colonnes adjacents. Ça peut aussi avoir le style comme une bordure.

On doit définir les propriétés columns ou column-count, car il doit exister des colonnes pour qu'on puisse spécifier leur style.

La propriété column-rule-style a les valeurs suivantes:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
Quelques extensions de la propriété sont ajoutées, telle que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les versions anciennes d'Opera etc.
Valeur initiale none
Appliquée à Éléments multicol.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.columnRuleStyle = "dashed" ;

Syntaxe

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit-column-rule-style: dotted;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule-style: dotted;
      column-count: 3;
      column-gap: 30px;
      column-rule-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété column-rule-style</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Voici un autre exemple avec la valeur "double". Les règles entre les colonnes sont doubles. Dans cet exemple aussi, une couleur est spécifiée pour le règle avec la propriété column-rule-color.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit-column-rule-style: double;
      -webkit-column-rule-width: 5px;
      -webkit-column-rule-color: #1c87c9;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule-style: double;
      -moz-column-rule-width: 5px;
      -moz-column-rule-color: #1c87c9;
      column-count: 3;
      column-gap: 30px;
      column-rule-style: double;
      column-rule-color: #1c87c9;
      column-rule-width: 5px;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Exemple de la propriété column-rule-style</h1>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Valeurs

Valeur Description
none Aucun règle n'est spécifié. C'est la valeur initiale.
hidden Le règle est masqué.
dotted Le règle est en pointillée.
dashed Le règle est de tirets.
solid Le règle est solide.
double Le règle est double.
groove Le règle est 3D groove. Les valeurs width et color définissent l'effet.
ridge Le règle est 3D ridge. Les valeurs width et color définissent l'effet.
inset Le règle est 3D inset. Les valeurs width et color définissent l'effet.
outset Le règle est 3D outset. Les valeurs width et color définissent l'effet.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome edge firefox safari opera
50.0
-webkit- 		12.0
-webkit- 		52.0
+ 3.5 -moz- 		3.0
-webkit- 		11.1
+ 15.0 -webkit-

Pratiquez vos connaissances

Quels sont les styles disponibles pour la propriété 'column-rule-style' en CSS?
Trouvez-vous cela utile?