Border bottom css что это
Перейти к содержимому

Border bottom css что это

  • автор:

border-bottom¶

Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет нижней границы элемента.

Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Демо¶

Как и все сокращённые свойства, 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 граница не будет показана.

  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10
border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; /* Global values */ border-bottom: inherit; border-bottom: initial; border-bottom: revert; border-bottom: revert-layer; border-bottom: unset; 

Значения¶

Значение border-bottom-width определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-bottom-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-bottom-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Значение по-умолчанию: Зависит от использования

Применяется к: Ко всем элементам

Спецификации¶

  • CSS Backgrounds and Borders Module Level 3
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
 html> head> meta charset="utf-8" /> title>border-bottomtitle> style> .panel  background: #ccc; /* Цвет фона */ > .panel p.content  padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ border-top: 2px dotted white; /* Параметры линии вверху */ > .panel p.title  font-family: sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ background: maroon; /* Цвет фона */ color: white; /* Цвет текста */ border-bottom: 2px solid white; /* Параметры линии внизу */ > style> head> body> div class="panel"> p class="title"> Резкий базовый тип личности глазами современников p> p class="content"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако пародия многопланово заканчивает общекультурный цикл. p> div> body> html> 

Ссылки¶

  • Свойство border-bottomMDN (рус.)

CSS свойство border-bottom

Это свойство позволяет определить все атрибуты нижней рамки HTML элемента за одну декларацию.

Свойство border-bottom позволяет устанавливает следующие свойства рамки: border-bottom-width, border-bottom-style и border-bottom-color.

В декларации можно опускать определение любого атрибута. Например, декларация border-bottom: solid #ff0000; вполне допустима.

CSS синтаксис

border-bottom: border-width border-style border-color | initial | inherit;

Возможные значения
Значение Описание
border-bottom-width Устанавливает толщину нижней рамки. По умолчанию «medium».
border-bottom-style Устанавливает стиль нижней рамки. По умолчанию «none».
border-bottom-color Устанавливает цвет нижней рамки. По умолчанию — цвет элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.
Пример использования

Устанавливаем стиль нижней рамки параграфа

border-bottom

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

  • border-bottom-width (en-US): medium
  • border-bottom-style (en-US): none
  • border-bottom-color (en-US): currentcolor
  • border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
  • border-bottom-style (en-US): как указано
  • border-bottom-color (en-US): вычисленный цвет
  • border-bottom-color (en-US): цвет
  • border-bottom-style (en-US): discrete
  • border-bottom-width (en-US): длина

Formal syntax

border-bottom =
|| (en-US)
|| (en-US)

=
| (en-US)
thin | (en-US)
medium | (en-US)
thick

=
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

Свойство border-bottom

Создание границы снизу для элемента. Порядок значений: толщина, стиль и цвет.

Возможные единицы: px, em, rem, vh, vw, а так же ключевые слова: thin, medium, thick

Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.

 .example-1 border-bottom: 2px solid;

Создание границы снизу для элемента без указания третьего параметра — цвета. Если параметр цвета не указан, то цвет границы будет таким же как цвет текста элемента

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *