Border bottom css: border-bottom — CSS: Cascading Style Sheets — Вебджем.рф

Содержание

border-bottom | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Зависит от использования
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

border-bottom: [border-width || border-style || border-color] | inherit

Значения

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

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

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

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom</title>
  <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>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
     aliguam erat volutpat.  </p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom

Объектная модель

[window.]document.getElementById(«elementID»).style.borderBottom

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Границы

CSS по теме

border-bottom

Статьи по теме

Колонки таблицы
Простая таблица
Строки таблицы
Таблица без рамки
Таблица с рамкой

Рецепты CSS

Как добавить линию возле текста?
Как добавить подчеркивание к заголовку?
Как добавить пунктирное подчеркивание к ссылкам?
Как сделать пунктирное подчеркивание текста?

border-bottom-style | htmlbook.

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Нет
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#border-style-properties

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает стиль границы внизу элемента.

Синтаксис

Значения

none: Линия не отображается и значение ее толщины обнуляется.
hidden: Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
dotted: Линия состоящая из набора точек.
dashed: Пунктирная линия, состоящая из серии коротких отрезков.
solid: Сплошная линия.
double: Двойная линия.
groove: Создает эффект вдавленной линии.
ridge: Создает эффект рельефной линии.
inset: Псевдотрехмерная линия.
outset: Псевдотрехмерная линия.
inherit: Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-style</title>
  <style>
   #panel {
    background: #ccc; /* Цвет фона */
   } 
   #panel p {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
   }
   #title {
    background: navy; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom-width: 2px; /* Толщина линии внизу */
    border-bottom-style: solid; /* Стиль линии внизу */
    border-bottom-color: white; /* Цвет линии внизу */
   }
  </style>
 </head>
 <body>
  <div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom-style

Объектная модель

[window.]document.getElementById(«elementID»).style.borderBottomStyle

Браузеры

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Границы

border-bottom — CSS: каскадные таблицы стилей

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

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

 Граница снизу: пунктирная;
нижняя граница: густо-зеленая;

На самом деле он такой же, как этот:

 border-bottom-style: dotted;
нижняя граница: нет густо-зеленый;

Значение border-bottom-style , заданное перед border-bottom , игнорируется. Поскольку значение по умолчанию border-bottom-style равно none , отсутствие указания части border-style приводит к отсутствию границы.

Это свойство является сокращением для следующих свойств CSS:

цвет нижней границы
нижняя рамка
ширина нижней границы

 нижняя граница: 1 пиксель;
нижняя граница: 2 пикселя с точками;
нижняя граница: средний пунктирный синий;
/* Глобальные значения */
нижняя граница: наследовать;
нижняя граница: начальная;
нижняя граница: вернуться;
нижняя граница: обратный слой;
нижняя граница: не установлена;

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

Значения

: См. ширина нижней границы .
<бр-стиль>: См. border-bottom-style .
<цвет>: См. цвет нижней границы .

Начальное значение	как каждое из свойств стенографии: `border-bottom-width` : `medium` `border-bottom-style` : `none` `border-bottom-color` : `currentcolor`
Applies to	все элементы. Это также относится к `::first-letter` .
Унаследовано	нет
Вычисленное значение	как каждое из свойств сокращенной записи: `Пограничная ширина` : абсолютная длина или `0` , если `Стиль пограничной шкафы` — `Нет` или `Скрытый` `Стиль границы` : при указании 9 `4. -bottom-color` : вычисленный цвет
Тип анимации	как каждое из свойств сокращения: `border-bottom-color` : border-bottom-style 2	0005 : дискретный `ширина нижней границы` : длина

 нижняя граница = 
  || 
 <стиль строки> || 
 <цвет>  "> = 
  | 
 тонкий | 
 средний | 
 толстый 
   "> = 
 нет | 
 скрыто | 
 с точками | 
 пунктир | 
 твердый | 
 двойной | 
 канавка | 
 хребет | 
 вставка | 
 начало

Применение нижней границы

HTML

 Это поле имеет нижнюю границу.

CSS

 раздел {
  нижняя граница: 4 пикселя пунктирная синяя;
  цвет фона: золото;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  вес шрифта: полужирный;
  выравнивание текста: по центру;
}

Результаты

Спецификация
Фоны и границы CSS Уровень 3 # border-shorthands

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

граница
пограничный блок
контур

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

border-bottom-width — CSS: каскадные таблицы стилей

Свойство CSS border-bottom-width устанавливает ширину нижней границы элемента.

 /* Значения ключевых слов */
граница-нижняя-ширина: тонкая;
ширина нижней границы: средняя;
граница-нижняя-ширина: толстая;
/* значения <длины> */
ширина нижней границы: 10em;
ширина нижней границы: 3vmax;
ширина нижней границы: 6px;
/* Глобальные ключевые слова */
ширина нижней границы: наследовать;
граница-нижняя-ширина: начальная;
граница-нижняя-ширина: вернуться;
граница-нижняя-ширина: обратный слой;
нижняя граница ширины: не установлена;

Значения

Определяет ширину границы либо как явное неотрицательное значение <длина> , либо как ключевое слово. Если это ключевое слово, оно должно иметь одно из следующих значений:

тонкий
средний
толстый

Примечание: Поскольку спецификация не определяет точную толщину, обозначаемую каждым ключевым словом, точный результат при использовании одного из них зависит от реализации. Тем не менее, они всегда следуют схеме тонкий ≤ средний ≤ толстый , и значения постоянны в пределах одного документа.

Исходное значение	`средний`
Применяется ко всем элементам	. Это также относится к `::first-letter` .
Унаследовано	нет
Вычисленное значение	абсолютная длина или `0` если `border-bottom-style или скрыто 0005`
Тип анимации	a длина

 border-bottom-width = 
   "> = 
  средний | 
 толстый

Сравнение ширины нижней границы

HTML

 Элемент 1
Элемент 2

CSS

 раздел {
  граница: 1px сплошной красный;
  поле: 1em 0;
}
div: n-й ребенок (1) {
  граница-нижняя-ширина: толстая;
}
div: n-й ребенок (2) {
  ширина нижней границы: 2em;
}

Результат

90181 9018 2 9018 2 9018 2 9018 2 9018 2 9018 2 9018 2

2 9018 2 9018 2 9018 2

2 9018 2

2929292929292929292 года.

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

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

Комментарий *

Имя *

Email *

Сайт

Спецификация
Фоны CSS и Borders Module Level 3 # Великобритания

Border bottom css: border-bottom — CSS: Cascading Style Sheets

border-bottom | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

CSS по теме

Статьи по теме

Рецепты CSS

border-bottom-style | htmlbook.

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

border-bottom — CSS: каскадные таблицы стилей

Значения

Применение нижней границы

HTML

CSS

Результаты

Обнаружили проблему с содержанием этой страницы?

border-bottom-width — CSS: каскадные таблицы стилей

Значения

Сравнение ширины нижней границы

HTML

CSS

Результат

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

Рубрики