border-bottom
Сокращённое свойство CSS border-bottom
описывает нижнюю границу элемента border. Оно устанавливает значения border-bottom-width
(en-US), border-bottom-style
(en-US) и border-bottom-color
(en-US).
Интерактивный пример
Как и все сокращённые свойства, 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
<br-width>
<br-style>
<color>
Formal definition
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter . |
Наследуется | нет |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | как и у каждого из подсвойств этого свойства: |
Formal syntax
border-bottom =
<line-width> || (en-US)
<line-style> || (en-US)
<color>
<line-width> =
<length [0,∞]> | (en-US)
thin | (en-US)
medium | (en-US)
thick
<line-style> =
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 | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 Определение 'border-bottom' в этой спецификации. |
Кандидат в рекомендации | No direct changes, though the modification of values for the border-bottom-color (en-US) do apply to it. |
CSS Level 2 (Revision 1) Определение 'border-bottom' в этой спецификации. |
Рекомендация | No significant changes. |
CSS Level 1 Определение 'border-bottom' в этой спецификации. |
Рекомендация | Initial definition |
Browser compatibility
BCD tables only load in the browser