Свойство CSS border-bottom-style
Свойство CSS border-bottom-style используется для задания стиля нижней границы элемента.
Свойство border-bottom-style не будет видно, если не заданы border-bottom-width и border-bottom-color (или сокращение border-bottom/border).
INFO
Обратите внимание, что спецификация не определяет, как границы разных стилей соединяются в углах.
| Начальное значение | none |
|---|---|
| Применяется к | Ко всем элементам. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.borderBottomStyle = "dotted"; |
Синтаксис
Синтаксис свойства CSS border-bottom-style
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Пример свойства border-bottom-style:
Пример использования свойства CSS border-bottom-style со значениями solid и dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: solid;
}
div {
border-bottom-style: dashed;
}
</style>
</head>
<body>
<h2>A heading with a solid bottom border</h2>
<div>A div element with a dashed bottom border.</div>
</body>
</html>Результат
Пример свойства border-bottom-style с несколькими значениями:
Пример использования свойства CSS border-bottom-style со значениями double, dashed и groove
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: double;
}
p {
border-style: solid;
border-bottom-style: dashed;
}
div {
border-bottom-style: groove;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>A heading with a double bottom border</h2>
<p> A paragraph with a dashed bottom border. </p>
<div>A div element with a groove bottom border.</div>
</body>
</html>Пример свойства border-bottom-style со значением "hidden":
Пример использования свойства border-bottom-style со значением "hidden":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid black;
border-bottom-style: hidden;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Пример свойства border-bottom-style со значением "inset":
Пример использования свойства border-bottom-style со значением "inset":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid;
border-bottom-style: inset;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Пример свойства border-bottom-style со значением "outset":
Пример использования свойства border-bottom-style со значением "outset":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
text-align: center;
border: 5px solid;
border-bottom-style: outset;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| none | Не отображает границу. Значение по умолчанию. | Запустить » |
| hidden | То же, что и "none", за исключением разрешения конфликтов границ для табличных элементов. | Запустить » |
| dotted | Граница отображается в виде ряда точек. | Запустить » |
| dashed | Граница отображается в виде ряда штрихов. | Запустить » |
| solid | Граница отображается в виде сплошной линии. | Запустить » |
| double | Граница отображается в виде двух сплошных линий. | Запустить » |
| groove | Это 3D-граница с эффектом канавки, создающая впечатление вырезанной границы. Противоположность ridge. | Запустить » |
| ridge | Задает 3D-границу с эффектом гребня, создавая впечатление выступающей границы. Противоположность groove. | Запустить » |
| inset | Это 3D-эффект, создающий впечатление, что элемент утоплен. Противоположность outset. | Запустить » |
| outset | Это 3D-эффект, создающий впечатление, что элемент выступает. Противоположность inset. | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какое из следующих значений является допустимым для свойства border-bottom-style в CSS?