border-bottom-width в CSS

border-bottom-w >

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

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

Тип свойства

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

Значения

Значением свойства border-bottom-width является указание толщины нижней части рамки в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. При этом отрицательные значения недопустимы. Также значениями могут быть следующие ключевые слова:

• thin — Тонкая рамка.
• medium — Средняя рамка.
• thick — Толстая рамка.
• inherit — наследует значение border-bottom-width от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: medium.

Синтаксис

Пример CSS: использование border-bottom-width

Результат. Использование свойства CSS border-bottom-width.

Версии CSS

Браузеры

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

CSS | Свойство border-bottom-width

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

Синтаксис:

Значения свойств: значения свойств border-bottom-width перечислены ниже:

• тонкий: используется для установки тонкой границы дна.
• средний: используется для установки нижней границы среднего размера. Это значение по умолчанию.
• толстый: используется для установки толстой нижней границы.
• длина: используется для установки ширины границы. Не принимает отрицательное значение.

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

Это свойство определяет толщину нижней стороны рамки HTML элемента.

Внимание: Следует всегда определять свойство border-style перед свойством border-bottom-width. Элемент должен иметь рамку, прежде чем менять ее толщину.

CSS синтаксис

Возможные значения

Пример

Устанавливаем толщину нижней стороны рамки параграфа

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

Пример

Задайте ширину нижней границы:

Подробнее примеры ниже.

Определение и использование

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

Примечание: Перед свойством всегда объявляйте свойство border-style или border-Bottom border-bottom-width . Элемент должен иметь границы, прежде чем можно изменить ширину.

Поддержка браузера

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

Синтаксис CSS

Значения свойств

Другие примеры

Пример

Установите ширину нижней границы в среднее:

border-bottom-w > IE Opera Chrome Firefox Safari IE до 7.0 (включ.) не поддерживает значение inherit и hidden + + + +

Пример

Прописываем ширину для нижней границы:

Описание и использование

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

Примечание: Всегда прописывайте свойство border-style перед свойством border-bottom-width. У элемента должна быть граница, прежде чем менять ее ширину.

border-bottom-width

The border-bottom-width property is used to set the width of the bottom border of an element.

The width of the border can be explicitly set using a value, or by using one of three border width keywords: thin , medium , and thick .

Official Syntax

• Syntax:

Notes

Note that the initial width is medium , but the initial border style of an element is none and therefore the used width is 0.

Values

Notes

The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific, but the values are constant throughout a document and thin ? medium ? thick. A browser could, for example, make the thickness depend on the medium font size: one choice might be 1px (for thin ), 3px (for medium ) & 5px (for thick ) when the medium font size is 17px or less.

The border-bottom-width property can also inherit the value of the element’s parent’s bottom border width using the keyword inherit .

Examples

The following are all valid border-bottom-width values set on an element. The element’s border style and border color are also set using the border-bottom-style and border-bottom-color respectively.

Live Demo

Have a look at the live demo:

Browser Support

The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Further Reading

Related Entries

Written by Sara Soueidan. Last updated February 4, 2015 at 2:29 pm by Mary Lou.

Do you have a suggestion, question or want to contribute? Submit an issue.

Collective #563

November 7, 2020

Game Off 2020 * Pure CSS Lace * The Svelte Handbook * GraphQL Crash Course * React Query.

Collective #562

October 31, 2020

Lesser Known Coding Fonts * Full Stack Authentication * Neural Synesthesia * Glaze * Free for devs.

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

Свойство border HTML позволяет определять стиль, ширину и цвет границы элемента. Границы элементов могут выполнять как декоративную, так и практическую функцию.

Стиль границы

Свойство border-style позволяет определить тип ( стиль ) границы.

Это свойство принимает разные значения :

• dotted – граница в точку;
• dashed – граница в штрих;
• solid – цельная граница;
• double – двойная граница;
• groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
• ridge — трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
• inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color ;
• outset — трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color ;
• none – отключение;
• hidden – скрытые границы.

У свойства HTML border style может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style !

Border Width

Свойство border-width определяет ширину границы по любой из четырех сторон элемента.

Ширину можно указывать как в единицах измерения ( px, pt, cm, em и т. д. ), так и с помощью ключевых слов: thin , medium или thick .

У свойства border-width может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Border Color

Свойство HTML border-color используется, чтобы указать цвет границы для одной из четырех сторон элемента.

Цвет можно указывать несколькими способами :

• Названием – вписывается название цвета ( например, red );
• Hex – указывается hex-значение цвета ( например, #FF0000 );
• RGB – указывается RGB-значение цвета ( например, rgb(255,0,0) );
• transparent ( прозрачная ).

У свойства border-color может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Если не выставить свойство border-color , то границы будут наследовать цвет элемента.

Стилизация границ по-отдельности

В CSS есть свойства border HTML для определения стиля каждой стороны элемента ( top, right, bottom и left ).

Подобного результата можно добиться и следующим методом:

Как это работает

Если у свойства HTML border style будет четыре значения:

• border-style: dotted solid double dashed ;
• верхняя граница имеет значение dotted ;
• правая граница имеет значение solid ;
• нижняя граница имеет значение double ;
• левая граница имеет значение dashed .

Если у border-style будет три значения:

• border-style: dotted solid double ;
• верхняя граница имеет значение dotted ;
• правая и левая границы имеют значение solid ;
• нижняя граница имеет значение double .

Если у border-style будет два значения:

• border-style: dotted solid ;
• верхняя и нижняя границы имеют значение dotted ;
• правая и левая границы имеют значение solid .

Если у HTML border style будет одно значение:

• border-style: dotted ;
• то все четыре границы будут иметь значение dotted .

В примерах, приведенных выше, мы использовали свойство border-style . Но учтите, что те же правила применения касаются и border-width , и border-color .

Сокращенное свойство border

Как видно из примеров, при стилизации границ элементов нужно применять довольно много разных свойств. Чтобы сократить код, можно использовать специальное свойство border :

• border-width ;
• border-style ( обязательно );
• border-color .

Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.

CSS :: Свойство border-bottom-w >Описание

css -свойство border-bottom-w >англ. bottom border width – ширина нижней границы) используется для установки ширины нижней границы элемента.

Характеристики

• Значение по умолчанию: medium .
• Применяется: ко всем элементам .
• Наследуется: нет .
• Анимируется: да .
• JavaScript: object.style.borderBottomW .

Синтаксис

border-bottom-width: [ | thin | medium | thick]

Изменить длину border-bottom

Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?
Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?Чет.

Border-top и border-bottom сделать шарами
здравствуйте, не могу сделать границы рамки шарами, т.е. border-bottom: 15px dotted black; — будут.

Двойной border-bottom
Создаю, 2 тему, извиняюсь, как сделать чтобы border был, на блоке div, и под текстом, к примеру.

border-bottom для строки таблицы
Есть таблица, а в ней

Border-bottom неправильно рисует черту
Здравствуйте. При просмотре в браузере, border-bottom рисует горизонтальную черту, но не внизу.

CSS border-bottom-w >Last update on November 09 2020 06:56:06 (UTC/GMT +8 hours)

border-bottom-width property

CSS border-bottomt-width property sets the width of a box’s bottom border.

Syntax:

Values

width: Width of the bottom border of a box. The following table shows the values :

inherit: If set, the associated element takes computed value of its parent element’s border-bottomt-width property.

Initial value

Applies to

border-bottomt-width property can be applied to all HTML elements which may form a box.

Inherited

Percentages

Media

Computed value

If the value set to none or hidden, it is 0, else it is an absolute value.

Browser compatibility

Example of border-bottomt-width property

CSS code:

HTML code:

View this example in a separate browser window