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

column-rule

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

Тип свойства

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

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

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

Значения

Значением свойства column-rule является одно или несколько (разделенных пробелом) значений его следующих подсвойств.

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

Значение по умолчанию: зависит от значений по умолчанию каждого подсвойства column-rule.

Синтаксис

column-rule: column-rule-color || column-rule-style || column-rule-width

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

<!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</title>
  <style type="text/css">
   p {
    column-count: 3; /* количество колонок */
    column-gap: 2em; /* расстояние между колонками */
    column-rule: 2px #000 solid; /* стили линий между колонками */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet consectetuer eleifend a dignissim lobortis pellentesque.
     Elit fringilla Nam quis Ut id ullamcorper ipsum platea eget condimentum. Nulla
     semper vestibulum in turpis lacinia turpis eleifend odio tristique lacinia. Curabitur
     tempus neque at congue ut laoreet nunc Nulla Curabitur nec. Et Praesent porta
     tincidunt justo Curabitur interdum elit Nulla Vestibulum tortor. Eget vitae ut dictumst
     Curabitur sagittis feugiat pellentesque tellus felis amet. Semper consectetuer malesuada
     Nam vel in morbi sit vel venenatis Mauris.</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 по назначению