Свойство CSS border-width
CSS border-width — сокращённое свойство для задания ширины четырёх сторон рамки элемента. Примеры и интерактивный редактор.
Свойство CSS border-width задаёт ширину (толщину) рамки элемента. Это сокращённая запись, применяющаяся сразу ко всем четырём сторонам, и она является компонентом ширины в более общем сокращённом свойстве border.
Каждую сторону можно задать отдельно с помощью длинных свойств:
- border-top-width определяет ширину верхней рамки.
- border-right-width определяет ширину правой рамки.
- border-bottom-width определяет ширину нижней рамки.
- border-left-width определяет ширину левой рамки.
Рамка отображается только тогда, когда border-style отличается от значения по умолчанию none. Если задать border-width без стиля рамки, рамка останется невидимой — именно в этом чаще всего кроется причина того, что рамка «не работает».
Как сокращённая запись распределяет значения по сторонам
border-width принимает от одного до четырёх значений, и их количество определяет, к каким сторонам они применяются:
| Заданные значения | Верх | Право | Низ | Лево |
|---|---|---|---|---|
border-width: a | a | a | a | a |
border-width: a b | a | b | a | b |
border-width: a b c | a | b | c | b |
border-width: a b c d | a | b | c | d |
Форма с четырьмя значениями следует порядку по часовой стрелке верх → право → низ → лево, который используется во всех сокращённых свойствах блочной модели CSS (тот же порядок, что у margin и padding).
Каждое значение — это <line-width>: либо единица длины (px, em, rem и т. д.), либо одно из ключевых слов thin, medium или thick. Процентные значения не допускаются.
| Начальное значение | medium |
|---|---|
| Наследуется | Нет |
| Анимируется | Да. Ширина рамки поддаётся анимации. |
| Версия | CSS1 |
| Синтаксис JavaScript | object.style.borderWidth = "1px 5px"; |
Синтаксис
border-width: <line-width>{1,4} | initial | inherit;Одно значение (все четыре стороны)
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>This paragraph's border width is set to 1px.</p>
</body>
</html>Разная ширина для каждой стороны
Здесь все три размера ключевых слов сравниваются рядом, а также показан блок с четырьмя значениями, где каждый край имеет разную толщину.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #666;
padding: 5px;
border-style: solid;
}
.thin {
border-width: 1px;
}
.medium {
border-width: medium;
}
.thick {
border-width: 10px;
}
.mixed {
/* top right bottom left */
border-width: 2px 8px 12px 24px;
}
</style>
</head>
<body>
<p class="thin">This paragraph's border width is set to 1px.</p>
<p class="medium">This paragraph's border width is set to medium.</p>
<p class="thick">This paragraph's border width is set to 10px.</p>
<p class="mixed">Each side has its own width: 2px 8px 12px 24px.</p>
</body>
</html>Результат
Ключевые слова и единицы длины: когда что использовать
- Используйте единицы длины (
px,em,rem), когда нужна точная, предсказуемая толщина — это стандартный подход в реальных макетах. - Используйте ключевые слова
thin,mediumиthick, когда точное значение в пикселях не важно и вы готовы доверить выбор браузеру. Они соответствуют небольшим, определяемым браузером значениям в пикселях (приблизительно 1px, 3px и 5px в большинстве браузеров, однако спецификация не фиксирует их). medium— это начальное значение, поэтому у элемента сborder-style: solidи безborder-widthуже отображается рамка средней ширины.
Отрицательные значения недопустимы и приводят к тому, что всё объявление игнорируется.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| medium | Задаёт рамку средней толщины. Это значение по умолчанию. (Относительное ключевое слово с определяемыми браузером значениями в пикселях.) | Попробовать » |
| thin | Задаёт тонкую рамку. | Попробовать » |
| thick | Задаёт толстую рамку. | Попробовать » |
| length | Определяет толщину рамки. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |