w3docs logo

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

войствоcolumn-rule-color устанавливает цвет линий.

Цвет линий может также быть установлен сокращенным свойством column-rule.

Можете выбрать цвет в нашем разделе HTML colors, а также установить цвет при помощи нашего инструмента Color Picker.

Значение по умолчанию currentColor
Применяется К многоколоночным элементам.
Наследуется Нет
Анимируемое Да. Цвет линий анимируем.
Версия CSS3
DOM синтаксис object.style.columnRuleColor = "#666";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 20px;  
      -webkit-column-rule-style: dashed;
      -webkit-column-rule-color: lightgreen;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 20px;  
      -moz-column-rule-style: dashed;
      -moz-column-rule-color: lightgreen;
      column-count: 3;
      column-gap: 20px; 
      column-rule-style: dashed;
      column-rule-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства column-rule-color</h2>
    <div>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>
Можно использовать названия цветов или цветовые коды hexadecimal, RGB, RGBA, HSL, HSLA как значения для свойства column-rule-color.

Пример, где установлено значение hexadecimal для свойства column-rule-color:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: #8ebf42;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: #8ebf42;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: solid;
      column-rule-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства column-rule-color</h2>
    <div>
     Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Пример со значением RGB:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: double;
      -webkit-column-rule-color: rgb(234, 211, 21);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: double;
      -moz-column-rule-color: rgb(234, 211, 21);
      column-count: 3;
      column-gap: 40px;
      column-rule-style: double;
      column-rule-color: rgb(234, 211, 21);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства column-rule-color</h2>
    <div>
     Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Пример со значением HSL:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: hsl(351, 97%, 57%);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: hsl(351, 97%, 57%);
      column-count: 3;
      column-gap: 30px;
      column-rule-style: solid;
      column-rule-color: hsl(351, 97%, 57%);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства column-rule-color</h2>
    <div>
     Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Значения

Значение Описание
color Устанавливает цвет линий. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

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

Практикуйте свои знания

Какое свойство CSS используется для изменения цвета линии между столбцами?
Считаете ли это полезным?