Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >column-rule

column-rule

column-rule: Breite Stil Farbe

Eine senkrechte Linie zwischen den Spalten eines mit columns oder column-count geteilten Inhalts. Sie wird genauso geschrieben wie border. Die Linie liegt in der Mitte des Spaltenabstands und nimmt keinen Platz ein – sie ändert die Breite der Spalten nicht.

Werte

  • 1px solid #ccc – eine dünne durchgezogene graue Linie.
  • 2px dashed – gestrichelt in der Textfarbe (currentcolor).
  • Die Teile einzeln: column-rule-width, column-rule-style, column-rule-color.

Initialwert: medium none currentcolor. Vererbt: nein. Gilt für: Elemente mit Spalten (columns, column-count).

Beispiele

Zwei Spalten, getrennt durch eine dünne Linie:

<div class="article">
  <p>Der erste Absatz in der linken Spalte. Die Linie zwischen den Spalten liegt genau in der Mitte des Abstands.</p>
  <p>Der zweite Absatz. Die Linie verringert die Breite der Spalten nicht, weil sie keinen Platz einnimmt.</p>
</div>

.article {
  column-count: 2;
  column-gap: 32px;
  column-rule: 1px solid #90a4ae;
  max-width: 460px;
}
.article p { margin: 0 0 8px; }
Ergebnis

Der erste Absatz in der linken Spalte. Die Linie zwischen den Spalten liegt genau in der Mitte des Abstands.

Der zweite Absatz. Die Linie verringert die Breite der Spalten nicht, weil sie keinen Platz einnimmt.

Worauf Sie achten sollten

  • Ohne Stil (solid, dashed…) wird die Linie nicht gezeichnet – der Standardstil ist none, genau wie bei einem Rahmen.
  • Eine Linie, die breiter als der Spaltenabstand ist, passt sich nicht an – sie ragt in den Text der Spalten. Machen Sie den Abstand mindestens so breit wie die Linie.
  • Die Kurzform setzt nicht angegebene Teile auf ihre Anfangswerte zurück – column-rule: dashed stellt die Breite wieder auf medium und die Farbe auf die Textfarbe.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit März 2017, gilt als weithin verfügbar seit September 2019. Ab Version: Chrome 50, Firefox 52, Safari 9. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
columns
column-count
border-style
gap
border