border-bottom

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

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

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

css

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

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

css

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

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 (en-US).

<br-style>

See border-bottom-style (en-US).

<color>

See border-bottom-color (en-US).

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

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

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

See also