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

css-свойство column-rule (от англ. column rule – разделительная линия колонки) позволяет одновременно задавать ширину, стиль и цвет разделительной линии колонок, перечисляя их через пробел в любом порядке.

Характеристики

Значение по умолчанию: см. каждое свойство.
Применяется: к многоколоночным элементам.
Наследуется: см. каждое свойство.
Анимируется: см. каждое свойство.
JavaScript: object.style.columnRule="value".

Синтаксис

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

Значения

Можно указывать через пробел значения свойств column-rule-width, column-rule-style и column-rule-color, задавая тем самым ширину, стиль и цвет разделительной линии колонок в одном месте. При этом значения могут быть указаны в любом порядке. Стиль разделительной линии должен указываться обязательно. Цвет и ширину можно не указывать, тогда браузер использует для них соответствующие значения по умолчанию.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#cr

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-rule

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		height: 300px;
		margin: 1em;
		padding: 0.7em;
		border: 3px solid green;
		column-count: 3;
		}
		
		.p_1{
		column-rule: 3px dashed green;
		}
		
		.p_2{
		column-rule-width: 3px;
		column-rule-style: dashed;
		column-rule-color: green;
		}

	</style>
	
</head>
<body>

	<p class="p_1">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст		
	</p> 
 
	<p  class="p_2">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
	
 </body>
</html>

Пример №1