MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

La propriété column-rule-style permet de définir le style de la ligne tracé entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.

/* Valeurs avec un mot-clé */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

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

Valeur initialenone
Applicabilitééléments sur plusieurs colonnes
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

<br-style> 
Un mot-clé (défini comme pour border-style) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. collapsing border model).

Syntaxe formelle

<br-style>


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

Exemples

CSS

.exemple {
  border: 10px solid #000000;
  
  -moz-columns:3;
  -webkit-columns:3;
  columns:3;

  -moz-column-rule-width: thick;
  -webkit-column-rule-width: thick;
  column-rule-width: thick;

  -moz-column-rule-color: blue;
  -webkit-column-rule-color: blue;
  column-rule-color: blue;

  -moz-column-rule-style: solid;
  -webkit-column-rule-color: solid;
  column-rule-color: solid; 
}

HTML

<p class=exemple>
  « Mais alors, » pensa Alice, « ne serai-je donc
  jamais plus vieille que je ne le suis maintenant ?
  D’un côté cela aura ses avantages, ne jamais être
  une vieille femme. Mais alors avoir toujours des
  leçons à apprendre ! Oh, je n’aimerais pas cela du
  tout. »
  « Oh ! Alice, petite folle, » se répondit-elle. 
  « Comment pourriez-vous apprendre des leçons ici ?
  Il y a à peine de la place pour vous, et il n’y en
  a pas du tout pour vos livres de leçons. »
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Multi-column Layout Module
La définition de 'column-rule-style' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui)-webkit
50.0[1]
(Oui) 3.5 (1.9.1)-moz
52.0 (52.0)[2]
10 11.10 3.0 (522)-webkit
Fonctionnalité Android Webview Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome pour Android
Support simple ? ?
50.0[1]
(Oui) (Oui)
52.0 (52.0)[2]
? ? ? ?
50.0[1]

[1] Non-préfixée à partir de Chrome 50.

[2] Non-préfixée à partir de Gecko 52, les synonymes préfixés sont toujours disponibles.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
 Dernière mise à jour par : SphinxKnight,