column-rule-width | Справочник CSS
http://belarusweb.net
Основы создания сайтов

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 – устанавливает толстую разделительную линию.

Ссылки

Примеры

HTML Результат BwCodes
<!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