Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

column-rule-width

Свойство CSS column-rule-width используется для указания толщины линий между колонками (столбцами) многоколоночного элемента.

Вместо column-rule-width можно применить универсальное свойство column-rule.

Тип свойства

Назначение: форматирование.

Применяется: к незамещаемым элементам уровня блока (кроме <TABLE> и элементов с display: table). К ячейкам таблиц — <TD>, <TH> и элементам с display: table-cell. А также к встроенным блокам — display: inline-block.

Наследуется: нет.

Значения

Значением свойства column-rule-width является указание толщины линий в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. При этом отрицательные значения недопустимы. Также значениями могут быть следующие ключевые слова:

  • thin — тонкие линии.
  • medium — средние линии.
  • thick — толстые линии.

Процентная запись: не существует.

Значение по умолчанию: medium.

Если свойство column-rule-style имеет значение none, то толщина линий станет равной нулю (0).

Синтаксис

column-rule-width: размер | thin | medium | thick

Пример CSS: использование column-rule-width

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство column-rule-width</title>
  <style type="text/css">
   p {
    column-count: 3; /* количество колонок */
    column-rule: 2px #f00 dotted; /* стили линий между колонками */
    column-rule-width: 5px; /* переопределяем толщину */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet consectetuer ipsum id cursus at dui. Malesuada Lorem
     semper id Duis non volutpat tincidunt Pellentesque Praesent parturient. Id nibh
     consequat Sed adipiscing fringilla et orci laoreet Proin nibh. Nunc vel ut augue
     est nibh laoreet netus adipiscing vel elit. Faucibus elit Morbi lorem Aenean vel
     tincidunt Sed leo Ut Nunc. Hendrerit nunc dapibus condimentum ante id ut interdum
     vel Cras convallis. Ligula mauris leo eget tellus Aliquam magna purus pede nulla id.</p>
 </body>
</html>

Результат примера

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и вышеДо 11.111.1 и выше3.1 и выше
Поддержка:НетНетНетНетДаНет
CSS по алфавиту
CSS по назначению