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
Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
Поддержка: | Да | Да | Да | Да |
Браузеры
Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
Поддержка: | Частично | Да | Да | Да | Да | Да |
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 синтаксис
Возможные значения
Значение | Описание |
---|---|
medium | Значение по умолчанию. Средняя толщина рамки. |
thin | Тонкая рамка. |
thick | Толстая рамка. |
толщина | Позволяет устанавливать толщину рамки в единицах измерения (например, в px). |
initial | Устанавливает значение по умолчанию. |
inherit | Значение наследуется от родительского элемента. |
Пример
Устанавливаем толщину нижней стороны рамки параграфа
CSS border-bottom-width Свойство
Пример
Задайте ширину нижней границы:
Подробнее примеры ниже.
Определение и использование
Свойство border-bottom-width задает ширину нижней границы элемента.
Примечание: Перед свойством всегда объявляйте свойство border-style или border-Bottom border-bottom-width . Элемент должен иметь границы, прежде чем можно изменить ширину.
Значение по умолчанию: | medium |
---|---|
Inherited: | no |
Animatable: | yes. Читайте о animatable |
Version: | CSS1 |
Синтаксис JavaScript: | object.style.borderBottomW |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
border-bottom-width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Синтаксис CSS
Значения свойств
Значение | Описание |
---|---|
medium | Задает среднюю нижнюю границу. Это значение по умолчанию |
thin | Задает тонкую нижнюю границу |
thick | Задает толстую нижнюю границу |
length | Позволяет определить толщину нижней границы. Читать о единицах длины |
initial | Присваивает этому свойству значение по умолчанию. Читайте о initial |
inherit | Наследует это свойство из родительского элемента. Читайте о inherit |
Другие примеры
Пример
Установите ширину нижней границы в среднее:
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 :
Value | Description |
---|---|
thin | A thin border is set if specified |
medium | A medium border is set if specified. |
thick | A thick border is set if specified |
length | You may use em, ex, in(for inches), cm(for centimeters), mm(for millimeters), pt(for points), pc(for picas), px(for pixel). |
inherit | Specifies that the border width should be inherited from the parent element |
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
Browser | Version |
---|---|
Internet Explorer | 4.0 and above |
Firefox (Gecko) | 1.0 and above |
Opera | 3.5 and above |
Safari (WebKit) | 1.0 and above |
Example of border-bottomt-width property
CSS code:
HTML code:
View this example in a separate browser window