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

border-bottom

Описание

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

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

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

Синтаксис

border-bottom: border-bottom-width || border-bottom-style || border-bottom-color

Значения

Можно указывать через пробел значения свойств border-bottom-width, border-bottom-style и border-bottom-color, задавая тем самым ширину, стиль и цвет границы в одном месте. При этом значения могут быть указаны в любом порядке. Стиль границы должен указываться обязательно. Цвет и ширину можно не указывать, тогда браузер использует для них соответствующие значения по умолчанию.

Ссылки

Примеры

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;
		color: red;
		background-color: yellow;
		}
		
		.border_1{
		border-left: solid;
		border-right: solid;
		border-top: solid;
		border-bottom: solid;
		}
		
		.border_2{
		border-left: dashed 2px;
		border-right: dashed 2px;
		border-top: dashed 2px;
		border-bottom: dashed 2px;	
		}
		
		.border_3{
		border-left: double green;
		border-right: double green;
		border-top: double green;
		border-bottom: double green;		
		}
		
		.border_4{
		border-left: dotted #0000FF 10px;
		border-right: dotted #0000FF 10px;
		border-top: dotted #0000FF 10px;
		border-bottom: dotted #0000FF 10px;		
		}
		
		/* Каждую границу оформляем по-разному */
		.border_5{
		border-left: solid;
		border-right: dashed 2px;
		border-top: double green;
		border-bottom: dotted #0000FF 10px;		
		}		
		
	</style>
	
</head>
<body>
	<p class="border_1">
		border-left: solid<br>
		border-right: solid<br>
		border-top: solid<br>
		border-bottom: solid<br>
		По умолчанию используется цвет шрифта и<br>
		значение ширины границ medium
	</p>
	
	<p class="border_2">
		border-left: dashed 2px<br>
		border-right: dashed 2px<br>
		border-top: dashed 2px<br>
		border-bottom: dashed 2px<br>
		По умолчанию используется цвет шрифта 
	</p>
	
	<p class="border_3">
		border-left: double green<br>
		border-right: double green<br>
		border-top: double green<br>
		border-bottom: double green<br>
		По умолчанию ширина границ принимается за medium
	</p>
	
	<p class="border_4">
		border-left: dotted #0000FF 10px<br>
		border-right: dotted #0000FF 10px<br>
		border-top: dotted #0000FF 10px<br>
		border-bottom: dotted #0000FF 10px 
	</p>
	
	<p class="border_5">
		border-left: solid<br>
		border-right: dashed 2px<br>
		border-top: double green<br>
		border-bottom: dotted #0000FF 10px<br>
		Каждую границу оформили по-разному		
	</p>
	
</body>
</html>

Пример №1