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: solid;

border-bottom: dashed red;

border-bottom: 1rem solid;

border-bottom: thick double #32a1ce;

border-bottom: 4mm ridge rgba(211, 220, 50, 0.6);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eee;
  color: #8b008b;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Как и все сокращённые свойства, 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

Начальное значение	как и у каждого из подсвойств этого свойства: `border-bottom-width`: `medium` `border-bottom-style`: `none` `border-bottom-color`: `currentcolor`
Применяется к	все элементы. Это также применяется к `::first-letter`.
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: `border-bottom-width`: абсолютная длина или `0`, если `border-bottom-style` - `none` или `hidden` `border-bottom-style`: как указано `border-bottom-color`: вычисленный цвет
Animation type	как и у каждого из подсвойств этого свойства: `border-bottom-color`: интерполируются по каждой компоненте - красной, зелёной и голубой - как вещественные числа с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в цветовом пространстве sRGBA, учитывающем прозрачность, для предотвращения появления неожиданных серых цветов.">цвет `border-bottom-style`: discrete `border-bottom-width`: интерполируются как вещественные числа с плавающей запятой.">длина

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