Свойство CSS border-top-style
Свойство CSS border-top-style задаёт стиль верхней границы элемента. Все значения свойства с примерами.
Свойство CSS border-top-style задаёт стиль линии верхней границы элемента — сплошная линия, пунктирная, 3D-канавка и т. д.
Оно принимает одно ключевое слово из того же набора значений, что доступен сокращённому свойству border-style. Разница — в охвате: border-style задаёт стиль всех четырёх сторон сразу, тогда как border-top-style действует только на верхний край. Соответствующие свойства для остальных сторон: border-right-style, border-bottom-style и border-left-style.
Когда использовать
Используйте border-top-style, когда один край должен выглядеть иначе, чем остальные — например, точечный разделитель над футером, пунктирная линия над блоком «читать далее» или одна сплошная полоса сверху карточки, тогда как остальные стороны остаются без границы. Если нужен одинаковый стиль со всех сторон, удобнее воспользоваться сокращённым свойством border-style.
Граница отображается только тогда, когда задан её стиль. По умолчанию border-top-style равно none, поэтому даже если задать цвет или ширину верхней границы, она не появится, пока не указан стиль. Ширина видимой верхней границы по умолчанию — medium; изменить её можно с помощью border-top-width или сокращённого свойства border-width, а цвет — с помощью border-color.
Визуализация не является попиксельно идентичной в разных браузерах. Например, Chrome отображает границы dotted в виде маленьких квадратов, а не круглых точек; расстояние между точками и штрихами определяет каждый движок самостоятельно.
Спецификация не определяет величину отступа между точками и штрихами.
Спецификация не определяет, как соединяются границы разных стилей в углах.
| Значение по умолчанию | none |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимируется | Нет |
| Версия | CSS1 |
| DOM Syntax | 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>В зависимости от значения 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>Значения groove, ridge, inset и outset создают ложный 3D-эффект, осветляя и затемняя border-color. На solid или однотонном фоне эффект может выглядеть почти плоским — он наиболее заметен при средних тонах цвета и толщине границы хотя бы в несколько пикселей.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| 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 | Наследует свойство от родительского элемента. |
Связанные свойства
- border-style — задаёт стиль всех четырёх сторон сразу.
- border-top — сокращённое свойство для ширины, стиля и цвета верхней границы.
- border-top-width — управляет толщиной верхней границы.
- border-color — задаёт цвет, которым рисуется граница.
- border-right-style, border-bottom-style, border-left-style — соответствующие свойства для каждой из сторон.