html.okpython.net
HTML и CSS для начинающих

CSS :: Свойство border-style

Сокращенное css-свойство border-style (от англ. border styleстиль границы) используется для установки стиля границ элемента в одном объявлении, позволяя задавать стиль как отдельных, так и сразу всех границ элемента.

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

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

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4}

Значения

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

При этом разрешается указывать через пробел одно, два, три или четыре значения:

  • одно значение – стиль задается для всех четырех сторон элемента;
  • два значения – первое значение задает стиль верхней и нижней границы элемента, второе – правой и левой;
  • три значения – первое значение задает стиль верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
  • четыре значения – стиль границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
		
		/* Четыре значения */
		.border_1{
		border-style: none dotted dashed solid;
		}
				
		/* Три значения */
		.border_2{
		border-style: double groove ridge;		
		}
		
		/* Два значения */
		.border_3{
		border-style: inset outset;		
		}
		
		/* Одно значение */
		.border_4{
		border-style: dashed;		
		}		
		
	</style>
	
</head>
<body>
	<p class="border_1">
		Четыре значения<br>
		border-style: none dotted dashed solid;
	</p>
	
	<p class="border_2">
		Три значения<br>
		border-style: double groove ridge;
	</p>
	
	<p class="border_3">
		Два значения<br>
		border-style: inset outset;
	</p>
	
	<p class="border_4">
		Одно значение<br>
		border-style: dashed;
	</p>
		
</body>
</html>

Пример №1