border-bottom

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Сокращённое свойство CSS border-bottom описывает нижнюю границу элемента border. Оно устанавливает значения border-bottom-width, border-bottom-style и border-bottom-color.

Интерактивный пример

Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...

css
border-bottom-style: dotted;
border-bottom: thick green;

... это то же самое, что ...

css
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

css
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>

See border-bottom-width.

<br-style>

See border-bottom-style.

<color>

See border-bottom-color.

Formal definition

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы. Это также применяется к ::first-letter.
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeкак и у каждого из подсвойств этого свойства:

Formal syntax

border-bottom = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Examples

Applying a bottom border

HTML

html
<div>This box has a border on the bottom side.</div>

CSS

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

Смотрите также