Свойство CSS column-rule-width

Свойство CSS column-rule-width определяет толщину разделительной линии между колонками. Свойство column-rule-width является одним из свойств CSS3.

Свойство column-rule-width действует только тогда, когда column-rule-style не равен none.

Это свойство принимает следующие значения:

medium
thick
thin
length

INFO

В спецификации не определена точная толщина каждого ключевого слова. Однако они всегда следуют этому порядку: thin ≤ medium ≤ thick.

Начальное значение	medium
Применяется к	Элементам с несколькими колонками.
Наследуется	Нет.
Анимация	Да. Толщина и цвет линии анимируются.
Версия	CSS3
DOM-синтаксис	object.style.columnRuleWidth = "5px";

Синтаксис

Синтаксис свойства CSS column-rule-width

css

column-rule-width: medium | thin | thick | length | initial | inherit;

Пример свойства column-rule-width:

Пример использования свойства CSS column-rule-width со значением thick

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 40px;
        column-rule-style: dotted;
        column-rule-color: #666;
        column-rule-width: thick;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-width property example</h1>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Результат

Свойство CSS column-rule-width

Пример свойства column-rule-width со значением "thin":

Пример использования свойства CSS column-rule-width со значением thin

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 40px;
        column-rule-style: solid;
        column-rule-width: thin;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-width property example</h1>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Пример свойства column-rule-width со значением "15px":

Пример использования свойства CSS column-rule-width со значением длины

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 40px;
        column-rule-style: groove;
        column-rule-color: #1c87c9;
        column-rule-width: 15px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-width property example</h1>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
medium	Линия средней толщины. Это значение по умолчанию.	Запустить »
thick	Линия толстая.	Запустить »
thin	Линия тонкая.	Запустить »
length	Указывает толщину линии.	Запустить »
initial	Устанавливает свойству значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство 'column-rule-width' в CSS?

Оно устанавливает ширину независимо для каждой колонки в многостолбцовом макете.Оно устанавливает цвет границы вокруг колонок.Оно определяет толщину разделительной линии между колонками в многостолбцовом макете.Оно определяет расстояние между колонками в многостолбцовом макете.Оно добавляет отступ к колонкам.

Свойство CSS column-rule-width ​

Синтаксис ​

Пример свойства column-rule-width: ​

Результат ​

Пример свойства column-rule-width со значением "thin": ​

Пример свойства column-rule-width со значением "15px": ​

Значения ​

Практика ​

Свойство CSS column-rule-width

Синтаксис

Пример свойства column-rule-width:

Результат

Пример свойства column-rule-width со значением "thin":

Пример свойства column-rule-width со значением "15px":

Значения

Практика