Свойство CSS `column-rule-color`

Базовая доступность Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с марта 2017 года.

Свойство column-rule-color CSS задаёт цвета линий, проводимых между столбцами в многоколоночных макетах сетки, flex и multicol.

Попробуйте

column-rule-color: purple;

column-rule-color: rgb(48 125 222), rgb(222 48 125);

column-rule-color: rgb(48 125 222), repeat(3, rgb(222 48 125));

column-rule-color: purple, repeat(auto, orange, yellow);

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  columns: 7;
  column-rule: solid thick;
  gap: 7px;
}

Синтаксис

/* Single <color> value */
column-rule-color: purple;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 60%);

/* Multiple values */
column-rule-color: purple, magenta;
column-rule-color: repeat(3, purple), repeat(3, transparent);
column-rule-color: repeat(3, purple), repeat(3, yellow, blue);
column-rule-color: purple, repeat(auto, transparent), purple;
column-rule-color: purple, repeat(auto, blue, yellow), purple;
column-rule-color:
  repeat(3, purple), repeat(auto, transparent), repeat(3, purple);

/* Global values */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: revert;
column-rule-color: revert-layer;
column-rule-color: unset;

Значения

Свойство column-rule-color принимает список значений, разделённых запятыми, включая:

<line-color>: color, задающий цвет линии.
<repeat-line-color>: Функция repeat(), первым аргументом которой является <integer> со значением 1 или больше, а последующими аргументами — одно или несколько значений <color>. Значение <integer> задаёт, сколько раз следует повторить значения <color>.
<auto-repeat-line-color>: Функция repeat(), первым аргументом которой является auto, а последующими аргументами — одно или несколько значений <color>. Указанные значения <color> повторяются столько раз, сколько необходимо, чтобы заполнить значения всех линий column-rule, для которых они не заданы явно другими компонентами значения свойства.

Описание

Свойство column-rule-color задаёт цвета любых линий, проводимых в промежутках между столбцами в контейнерах с многоколоночным макетом, flex и grid, содержащих более одного столбца.

Значение представляет собой список компонентов, разделённых запятыми. В него могут входить значения типов <line-color>, <repeat-line-color> и <auto-repeat-line-color>.

Свойство column-rule-color вместе со свойствами column-rule-width и column-rule-style можно задать с помощью сокращённого свойства column-rule. Свойство column-rule-color вместе со свойством row-rule-color также можно задать с помощью сокращённого свойства rule-color.

Значение <line-color> можно задать любым допустимым значением CSS-типа color. Если значение свойства состоит только из одного <color>, все линии будут этого цвета. Например, если указать следующее, все линии в промежутках между столбцами будут синими:

column-rule-color: blue;

Если указано несколько значений <line-color>, они будут применяться к линиям, нарисованным в промежутках между столбцами, в заданном порядке. Если линий больше, чем значений <line-color>, список цветов повторяется, пока для каждой линии column-rule не будет задан цвет. Например, если указать следующее, каждая нечётная линия будет красной, а каждая чётная — жёлтой.

column-rule-color: red, yellow;

Повторяющиеся цвета линий

Функция repeat(), первым аргументом которой является целое число 1 или больше, позволяет повторить указанное число раз список допустимых значений CSS-типа color, переданных в качестве последующих аргументов. Благодаря этому значения цветов можно повторять нужное количество раз, не перечисляя их по отдельности. Следующие объявления эквивалентны:

column-rule-color: blue, yellow, red, yellow, red;
column-rule-color: blue, repeat(2, yellow, red);

В результате создаётся список из пяти цветов. Если количество цветов в списке цветов значения column-rule-color превышает количество промежутков между столбцами, лишние значения цветов игнорируются. Если контейнер содержит три столбца, линия в первом промежутке будет синей, а во втором — жёлтой.

Автоматически повторяющиеся цвета линий

Функция repeat() также принимает auto в качестве первого аргумента вместо положительного целого числа. Если первым аргументом является auto, значения <color>, переданные в качестве последующих аргументов, повторяются столько раз, сколько необходимо, чтобы заполнить значения всех линий column-rule, для которых они не заданы явно другими компонентами значения свойства.

column-rule-color: blue, repeat(auto, yellow), red;

В этом случае первая линия column-rule будет синей, последняя — красной, а все остальные — жёлтыми. Если линий column-rule не меньше двух, первая всегда будет синей, а последняя — красной. Все остальные линии будут жёлтыми, поэтому при наличии только двух или трёх столбцов жёлтых линий не будет.

Ключевое слово auto внутри функции repeat() создаёт автоповторитель, который заполняет значения цветов линий column-rule, которые иначе не получили бы значения из других частей списка, и предотвращает циклическое повторение списка. Значение column-rule-color может содержать не более одного repeat(auto, <color>).

Формальное определение

Исходное значение	currentcolor
Применяется к	элементам multicol
Наследуется	нет
Вычисленное значение	вычисленный цвет
Тип анимации	a <a href="/en-US/docs/Web/CSS/Reference/Values/color_value#interpolation" title="Значения CSS-типа данных <color> интерполируются по каждой из составляющих красного, зелёного и синего цвета, каждая из которых рассматривается как вещественное число с плавающей запятой. Обратите внимание, что интерполяция цветов выполняется в цветовом пространстве sRGBA с предварительно умноженной альфа-составляющей, чтобы избежать появления неожиданных серых цветов.">цвет</a>

Формальный синтаксис

column-rule-color = 
  <color>

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> = 
  lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<lch()> = 
  lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Примеры

Базовый пример

В этом примере мы задаём один цвет для линий, проводимых между столбцами в многоколоночном макете.

HTML

Добавим абзац текста.

<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

Мы задаём элементу <p> роль многоколоночного контейнера. Добавляем gap размером 7px, чтобы оставить достаточно места для 3px пунктирной линии, проведённой между столбцами:

p {
  column-count: 5;
  gap: 7px;
  column-rule-style: dashed;
  column-rule-width: 3px;

  column-rule-color: blue;
}

Результат

Несколько значений цвета

В этом примере показано, как задать несколько цветов и как значения повторяются, если в списке цветов их меньше, чем промежутков между столбцами.

Используя те же HTML и CSS, что и в предыдущем примере, зададим три цвета через запятую в качестве значения column-rule-color:

<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

p {
  column-count: 5;
  gap: 7px;
  column-rule-style: dashed;
  column-rule-width: 3px;
}

@layer no-support {
  @supports not (column-rule-color: red, blue) {
    body::before {
      content: "Your browser doesn't support multiple values for the column-rule-color property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

p {
  column-rule-color: blue, yellow, red;
}

Результат

Есть четыре промежутка, но только три цвета, поэтому список повторяется: первая и четвёртая линии будут синими.

Использование функции `repeat()`

В этом примере показано использование функции repeat() в значении свойства column-rule-color и то, как эта функция помогает избежать громоздких сложных значений.

HTML

Добавим список авторов:

<ul>
  <li>Kimberlé Crenshaw</li>
  <li>Angela Y. Davis</li>
  <li>Bernardine Evaristo</li>
  <li>Audre Lorde</li>
  <li>Cathy Park Hong</li>
  <li>Zoya Patel</li>
  <li>Juno Mac</li>
  <li>Molly Smith</li>
  <li>Tara Westover</li>
</ul>

CSS

Сначала зададим списку роль контейнера grid и создадим столбцы с помощью свойства grid-template-columns. Добавим gap размером 7px, чтобы между столбцами было достаточно места для 3px пунктирной линии, и уберём маркеры, задав свойству list-style-type значение none.

Затем, чтобы показать, как значения могут усложняться, и продемонстрировать пользу функции repeat(), объявим два пользовательских свойства, которые используем в трёх объявлениях функции цвета color-mix() для создания синего, красного и жёлтого цветов. Жёлтый цвет color-mix() находится внутри функции repeat(), заданной для трёх повторений.

Мы также добавили рамку вокруг каждого элемента grid, чтобы было видно, как линия проходит посередине промежутка между столбцами.

ul {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 7px;
  list-style-type: none;
  column-rule-style: dashed;
  column-rule-width: 3px;

  --base: yellow;
  --mixin: blue;
  column-rule-color:
    color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)),
    repeat(3, color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin))),
    color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin));
}
li {
  border: 1px solid #dddddd;
}

Результат

В сетке девять ячеек по горизонтали, то есть восемь промежутков. Функция repeat() повторяет два смешанных цвета три раза, создавая список из семи цветов. Поскольку промежутков между столбцами больше, чем цветов в списке, последний цвет списка не используется.

Использование `auto` в функции `repeat()`

В этом примере показано использование auto вместо целого числа в функции repeat().

Используем те же HTML и CSS, что и в предыдущих примерах, но переопределим значение column-rule-color. Здесь мы используем repeat(auto, <color>), чтобы задать всем линиям почти прозрачный чёрный цвет (#00000033), кроме первой и последней, которые будут сплошного цвета black.

ul {
  column-rule-color: black, repeat(auto, #00000033), black;
}

Результат

@layer no-support {
  @supports not (column-rule-color: repeat(3, red)) {
    body::before {
      content: "Your browser doesn't support `repeat()` functions within a column-rule-color property value";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Спецификации

Спецификация
Модуль CSS Multi-column Layout, уровень 1 # crc

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`column-rule-color`	50 1	12 12	52 3.5–74	11.1 15	9 3	50 18	52 4	11.1 14	9 1	5.0 1.0	50 4.4	9 1
`currentColor`	1	12	3.5	15	4	18	4	14	3.2	1.0	4.4	3.2
`transparent`	1	12	3.5	15	3	18	4	14	2	1.0	4.4	2

См. также

Тип данных color
column-rule-width
column-rule-style
row-rule-color
Сокращённое свойство column-rule
Сокращённое свойство rule-color
Сокращённое свойство rule
Модуль CSS для промежутков CSS gaps

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/column-rule-color

Свойство CSS `column-rule-color`

Попробуйте

Синтаксис

Значения

Описание

Повторяющиеся цвета линий

Автоматически повторяющиеся цвета линий

Формальное определение

Формальный синтаксис

Примеры

Базовый пример

HTML

CSS

Результат

Несколько значений цвета

Результат

Использование функции repeat()

HTML

CSS

Результат

Использование auto в функции repeat()

Результат

Спецификации

Совместимость с браузерами

См. также

Использование функции `repeat()`

Использование `auto` в функции `repeat()`