border-bottom
Сокращённое свойство CSS border-bottom
описывает нижнюю границу элемента border. Оно устанавливает значения border-bottom-width
, border-bottom-style
и border-bottom-color
.
Интерактивный пример
Как и все сокращённые свойства, 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
граница не будет показана.
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
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
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-shorthands |
Совместимость с браузерами
BCD tables only load in the browser