CSS свойство border-width, поддержка в браузерах, примеры использования // Вебшкола онлайн



up_violet-3998477Перейти к справке CSS

p { border-style:solid; border-width:15px;

}

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

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

  • border-width:thin medium thick 10px;
    • верхняя граница тонкая
    • правая граница средней толщины
    • нижняя граница толстая
    • левая граница толщиной 10px

  • border-width:thin medium thick;
    • верхняя граница тонкая
    • правая и левая границы средней толщины
    • нижняя траница толстая

  • border-width:thin medium;
    • верхняя и нижняя границы тонкие
    • правая и левая границы средней толщины

  • border-width:thin;

Заметка: для облегчения запоминания порядка окрашивания бордюров можно запомнить два простых правила:

  1. Бордюры нумеруются с верхнего по часовой стрелки
  2. Вертикальные бордюры имеют приоритет перед горизонтальными, т.е. если указано три цвета, два вертикальных имеют свои цвета, а левый бордюр получает цвет от правого.

Заметка: всегда задавайте свойство border-style перед свойством border-width. Элемент должен иметь бордюры, для которых вы хотите изменить ширину.

Значение по умолчанию medium
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderWidth=»thick»

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

chrome-1442521 firefox-3258412 ie-4493128 opera-6725299 safari-4494801
Свойство border-width поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

Возможные значения свойства border-width

Значение Описание
thin Тонкий бордюр
medium Средний бордюр
thick Толстый бордюр
length Ширина бордюра в каких-либо единицах, например, в пикселях
inherit Значение наследуется от родительского элемента

Связанные страницы

Учебник CSS: CSS border

up_violet-3998477Перейти к справке CSS