Свойство CSS border-top-style
Свойство CSS border-top-style используется для установки стиля верхней границы элемента.
Это свойство указывается в виде одного ключевого слова, выбранного из доступных для свойства border-style. Свойство border-style задаёт стиль для всех четырёх сторон элемента, тогда как border-top-style устанавливает стиль только для верхней границы.
По умолчанию ширина верхней границы равна medium. Её можно изменить, используя свойства border-top-width или border-width.
Не все браузеры отображают стили одинаково. В Chrome точки отображаются в виде прямоугольников, а не кругов.
INFO
В спецификации не указан размер отступа между точками и штрихами.
INFO
В спецификации не определено, как границы разных стилей соединяются в углах.
| Значение по умолчанию | none |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимация | Нет |
| Версия | CSS1 |
| Синтаксис DOM | object.style.borderTopStyle = "dashed"; |
Синтаксис
Синтаксис свойства CSS border-top-style
border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Пример использования свойства border-top-style:
Пример использования свойства CSS border-top-style со значениями dashed и dotted
<!DOCTYPE html>
<html>
<head>
<style>
h2,
p {
padding: 15px;
border: solid #666;
}
h2 {
border-top-style: dashed;
}
p {
border-top-style: dotted;
}
</style>
</head>
<body>
<h2>A Heading with dashed border-top-style.</h2>
<p>A paragraph with dotted border-top-style.</p>
</body>
</html>INFO
В зависимости от значения border-color эффекты значений groove, ridge, inset и outset могут изменяться.
Результат
Пример использования свойства border-top-style со всеми значениями стилей:
Пример использования свойства CSS border-top-style со значениями hidden, dotted, dashed, solid, double, groove, ridge, inset и outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #1c87c9;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #c9c5c5;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-top-style example classes */
.b1 {
border-top-style: hidden;
}
.b2 {
border-top-style: dotted;
}
.b3 {
border-top-style: dashed;
}
.b4 {
border-top-style: solid;
}
.b5 {
border-top-style: double;
}
.b6 {
border-top-style: groove;
}
.b7 {
border-top-style: ridge;
}
.b8 {
border-top-style: inset;
}
.b9 {
border-top-style: outset;
}
</style>
</head>
<body>
<h1>Border-top-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Values
| Значение | Описание | Запустить |
|---|---|---|
| none | Определяет отсутствие границы. Значение по умолчанию. | Запустить » |
| hidden | Аналогично "none", за исключением разрешения конфликтов границ для табличных элементов. | Запустить » |
| dotted | Определяет пунктирную границу. | Запустить » |
| dashed | Определяет штриховую границу. | Запустить » |
| double | Определяет двойную границу. | Запустить » |
| solid | Определяет сплошную границу. | Запустить » |
| groove | Определяет 3D-границу с эффектом канавки. Её эффект можно изменить с помощью значения border-color. | Запустить » |
| ridge | Определяет 3D-границу с эффектом гребня. Её эффект можно изменить с помощью значения border-color. | Запустить » |
| inset | Определяет 3D-внутреннюю границу. Её эффект можно изменить с помощью значения border-color. | Запустить » |
| outset | Определяет 3D-внешнюю границу. Её эффект можно изменить с помощью значения border-color. | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Practice
Какие из следующих вариантов являются допустимыми значениями для свойства 'border-top-style' в CSS?