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
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 |
---|
CSS Backgrounds and Borders Module Level 3 # border-shorthands |
Совместимость с браузерами
BCD tables only load in the browser