border-bottom¶
Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет нижней границы элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.
Демо¶
Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что .
border-bottom-style: dotted; border-bottom: thick green; . это то же самое, что .
border-bottom-style: dotted; border-bottom: none thick green; . и значение border-bottom-style , указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для border-bottom-style является none , то без указания border-style граница не будет показана.
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
Синтаксис¶
1 2 3 4 5 6 7 8 9 10
border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; /* Global values */ border-bottom: inherit; border-bottom: initial; border-bottom: revert; border-bottom: revert-layer; border-bottom: unset; Значения¶
Значение border-bottom-width определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-bottom-style . Их названия и результат действия представлен на рис. 1.
border-bottom-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
Значение по-умолчанию: Зависит от использования
Применяется к: Ко всем элементам
Спецификации¶
- CSS Backgrounds and Borders Module Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
html> head> meta charset="utf-8" /> title>border-bottomtitle> style> .panel background: #ccc; /* Цвет фона */ > .panel p.content padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ border-top: 2px dotted white; /* Параметры линии вверху */ > .panel p.title font-family: sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ background: maroon; /* Цвет фона */ color: white; /* Цвет текста */ border-bottom: 2px solid white; /* Параметры линии внизу */ > style> head> body> div class="panel"> p class="title"> Резкий базовый тип личности глазами современников p> p class="content"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако пародия многопланово заканчивает общекультурный цикл. p> div> body> html> Ссылки¶
- Свойство border-bottomMDN (рус.)
CSS свойство border-bottom
Это свойство позволяет определить все атрибуты нижней рамки HTML элемента за одну декларацию.
Свойство border-bottom позволяет устанавливает следующие свойства рамки: border-bottom-width, border-bottom-style и border-bottom-color.
В декларации можно опускать определение любого атрибута. Например, декларация border-bottom: solid #ff0000; вполне допустима.
CSS синтаксис
border-bottom: border-width border-style border-color | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| border-bottom-width | Устанавливает толщину нижней рамки. По умолчанию «medium». |
| border-bottom-style | Устанавливает стиль нижней рамки. По умолчанию «none». |
| border-bottom-color | Устанавливает цвет нижней рамки. По умолчанию — цвет элемента. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем стиль нижней рамки параграфа
border-bottom
Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что .
border-bottom-style: dotted; border-bottom: thick green;
. это то же самое, что .
border-bottom-style: dotted; border-bottom: none thick green;
. и значение border-bottom-style (en-US), указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для border-bottom-style (en-US) является none , то без указания border-style граница не будет показана.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue;
The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
Values
Formal definition
- border-bottom-width (en-US): medium
- border-bottom-style (en-US): none
- border-bottom-color (en-US): currentcolor
- border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
- border-bottom-style (en-US): как указано
- border-bottom-color (en-US): вычисленный цвет
- border-bottom-color (en-US): цвет
- border-bottom-style (en-US): discrete
- border-bottom-width (en-US): длина
Formal syntax
border-bottom =
|| (en-US)
|| (en-US)
=
| (en-US)
thin | (en-US)
medium | (en-US)
thick
=
none | (en-US)
hidden | (en-US)
dotted | (en-US)
dashed | (en-US)
solid | (en-US)
double | (en-US)
groove | (en-US)
ridge | (en-US)
inset | (en-US)
outset
Examples
Applying a bottom border
HTML
div>This box has a border on the bottom side.div>
CSS
div border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; >
Results
Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |
Совместимость с браузерами
BCD tables only load in the browser
Свойство border-bottom
Создание границы снизу для элемента. Порядок значений: толщина, стиль и цвет.
Возможные единицы: px, em, rem, vh, vw, а так же ключевые слова: thin, medium, thick
Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.
.example-1 border-bottom: 2px solid;
Создание границы снизу для элемента без указания третьего параметра — цвета. Если параметр цвета не указан, то цвет границы будет таким же как цвет текста элемента