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

column-rule-style

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

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

Тип свойства

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

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

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

Значения

Значением свойства column-rule-style является одно из ключевых слов таких же, как и у свойства border-style. Причем, если column-rule-style: none, то толщина линий станет равной нулю (0).

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

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

Синтаксис

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

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

<!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-style</title>
  <style type="text/css">
   p {
    column-count: 3; /* количество колонок */
    column-rule: 3px #f00 solid; /* вид линий между колонками */
    column-rule-style: dotted; /* изменяем стиль */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet consectetuer orci tristique neque quis sit. Donec
     augue pellentesque Fusce porttitor nibh amet tellus sociis feugiat sit. Vestibulum
     semper pellentesque eros id ut pretium velit quis non Pellentesque. Turpis vestibulum
     volutpat habitant ridiculus Aliquam egestas nec lorem Suspendisse id. Quis consequat
     fames sit turpis convallis Donec vel amet volutpat habitasse. Wisi justo hendrerit
     id molestie vel Nam Quisque velit ante at. Enim pellentesque tempus Morbi cursus
     adipiscing vitae a pellentesque nunc wisi.</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 по назначению