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

column-rule-style

Описание

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

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

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

Синтаксис

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Значения

  • none – разделительная линия не отображается, браузер обнуляет ее ширину.
  • hidden – для колонок работает как none.
  • dotted – разделительная линия будет иметь точечный вид.
  • dashed – разделительная линия будет иметь пунктирный вид.
  • solid – разделительная линия будет сплошной.
  • double – разделительная линия будет двойной.
  • groove – разделительная линия будет иметь объемный рифленый вид с эффектом вдавленности.
  • ridge – разделительная линия будет иметь объемный рифленый вид с эффектом выпуклости.
  • inset – разделительная линия будет иметь объемный вид с эффектом вдавленности.
  • outset – разделительная линия будет иметь объемный вид с эффектом выпуклости.

Ссылки

Примеры

HTML Результат BwCodes
<!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;
		column-rule: 3px green;
		}
		
		.p_1{
		column-rule-style: dashed;
		}
		
		.p_2{
		column-rule-style: double;
		}

	</style>
	
</head>
<body>

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

Пример №1