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

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

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

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

Синтаксис

column-rule-width: <ширина> | thin | medium | thick

Значения

ширина – принимаются любые единицы измерения (смотреть), используемые в CSS. Проценты использовать не разрешается.
thin – устанавливает тонкую разделительную линию.
medium – устанавливает среднюю разделительную линию.
thick – устанавливает толстую разделительную линию.

Ссылки

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

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

Примеры

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: dashed green;
		}
		
		.p_1{
		border: 1px solid green;
		column-rule-width: 1px;
		}
		
		.p_2{
		border: 0.3em solid green;
		column-rule-width: 0.3em;
		}

	</style>
	
</head>
<body>

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

Пример №1