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

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

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

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

Синтаксис

column-rule-color: <цвет>

Значения

Любое допустимое в CSS значение цвета.

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

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

	</style>
	
</head>
<body>

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

Пример №1