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

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

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

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

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

Синтаксис

border-top-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]

Значения

  • 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-top-style: solid;
		border-right-style: dashed;		
		border-bottom-style: groove;		
		border-left-style: double;
		}
		
	</style>
	
</head>
<body>
	
	<p class="border_1">
		Стили границ по отдельности<br>
		border-top-style: solid;<br>
		border-right-style: dashed;<br>		
		border-bottom-style: groove;<br>		
		border-left-style: double;
	</p>
		
</body>
</html>

Пример №1