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

border-width

Описание

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

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

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

Синтаксис

border-width: [<ширина> | thin | medium | thick] {1,4}

Значения

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

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

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

Ссылки

Примеры

HTML Результат BwCodes
<!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 green;
		}
		
		/* Четыре значения */
		.border_1{
		border-width: thin medium thick 10px;
		}
				
		/* Три значения */
		.border_2{
		border-width: 1px medium 0.5em;		
		}
		
		/* Два значения */
		.border_3{
		border-width: 0.1em 0.3em;		
		}
		
		/* Одно значение */
		.border_4{
		border-width: 5px;		
		}		
		
	</style>
	
</head>
<body>
	<p class="border_1">
		Четыре значения<br>
		border-width: thin medium thick 10px;
	</p>
	
	<p class="border_2">
		Три значения<br>
		border-width: 1px medium 0.5em;
	</p>
	
	<p class="border_3">
		Два значения<br>
		border-width: 0.1em 0.3em;
	</p>
	
	<p class="border_4">
		Одно значение<br>
		border-width: 5px;
	</p>
		
</body>
</html>

Пример №1