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

Последнее обновление 9 мая 2019 06:57:42 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

свойство в стиле border-top

Свойство CSS border-top-style устанавливает стиль линии верхней границы блока .

Синтаксис:

 стиль границы стиля: стиль | унаследовать

Ценности

Стиль : стиль верхней границы окна. В следующей таблице приведены значения:

значение	Описание
никто	Стиль не установлен. Ширина границы равна нулю.
скрытый	Стиль не установлен. Ширина границы равна нулю, за исключением границы элементов таблицы (например, td, tr).
пунктирный	Граница - это цепочка точек.
пунктирная	Граница - это цепочка маленьких штрихов.
твердый	Граница состоит из одного отрезка.
двойной	Граница состоит из двух отрезков. В этом случае ширина границы рассчитывается путем суммирования ширины линий и расстояния между двумя линиями.
паз	Как будто граница вырезана.
хребет	Как будто граница выходит из среды, на которой она отображается.
вставка	Как будто коробка встроена.
вставка	Как будто коробка вырезана.

наследовать : если установлено, связанный элемент принимает вычисленное значение свойства border-top-style его родительского элемента.

Начальное значение

Относится к

Свойство border-top-style можно применять ко всем элементам HTML.

унаследованный

Нет.

Процентное соотношение

Недоступен.

Средства массовой информации

визуальный.

Расчетное значение

Как указано.

Совместимость браузера

браузер	Версия
Internet Explorer	4.0 и выше
Firefox (Геккон)	1.0 и выше
опера	3.5 и выше
Safari (WebKit)	1.0 и выше

Пример свойства border-top-style

Код CSS:

.w3r_none {
border-top-style: none;
}
.w3r_hiddent {
border-top-style: hidden;
}
.w3r_dotted {
border-top-style: dotted;
}
.w3r_dashed{
border-top-style: dashed;
}
.w3r_solid {
border-top-style: solid;
}
.w3r_double {
border-top-style: double;
}
.w3r_groove {
border-top-style: groove;
}
.w3r_ridge {
border-top-style: ridge;
}
.w3r_inset {
border-top-style: inset;
}
.w3r_outset {
border-top-style: outset;
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS border-top-style example - w3resource</title>
<link rel='stylesheet' href='border-top-style.css' type='text/css' />
</head>
<body>
<p  class="w3r_none">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_hidden">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_dotted">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_dashed">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_solid">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_double">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_groove">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_ridge">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_inset">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_outset">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства border-top-style.

Предыдущая: сокращенное свойство CSS margin
Далее: CSS-свойство border-bottom-style