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

Версия: 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:
  • Initial: medium
  • Applies To: all elements
  • Animatable: yes
  • 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

    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

    20.01.2020, 18:08

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

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

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

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

    + .product_item /* .basket_table tr */ <.

    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

    Илон Маск рекомендует:  Как программно сжатьрастянуть картинку
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL