Тип CSS `<line-width>`

Значение типа <line-width> перечисления представляет собой значение длины или ключевого слова, определяющее ширину линии или её отсутствие. Ключевые слова <line-width> используются в следующих свойствах с полным и сокращённым синтаксисом:

• border, border-width
• border-block, border-block-width
• border-block-end, border-block-end-width
• border-block-start, border-block-start-width
• border-bottom, border-bottom-width
• border-inline, border-inline-width
• border-inline-end, border-inline-end-width
• border-inline-start, border-inline-start-width
• border-left, border-left-width
• border-right, border-right-width
• border-top, border-top-width
• column-rule, column-rule-width
• row-rule, row-rule-width
• rule, rule-width
• outline, outline-width

Синтаксис

Значения

Тип <line-width> задаётся либо с помощью <length>, либо с помощью ключевого слова:

<length>

Неотрицательная <length>.

hairline

Представляет собой «едва заметную» линию толщиной не более 1px.

thin

То же, что и 1px.

medium

То же, что и 3px.

thick

То же, что и 5px.

Формальный синтаксис

<line-width> = <length [0,∞]> | hairline | thin | medium | thick

Примеры

Определение ширины линии

В этом примере показаны все ключевые слова <line-width>, а также значение <length>.

HTML

Мы добавляем пять блоков в элемент <section>.

<section>
  <div data-width="hairline">hairline</div>
  <div data-width="thin">thin</div>
  <div data-width="medium">medium</div>
  <div data-width="thick">thick</div>
  <div data-width="10px">10px</div>
</section>

CSS

Мы задаём всем элементам одинаковый стиль, а затем устанавливаем border-width в зависимости от атрибута data-width элемента.

section {
  display: flex;
  gap: 10px;
}
div {
  flex: 0 0 15%;
  border-style: solid;
  border-color: purple;
  text-align: center;
}
[data-width="hairline"] {
  border-width: hairline;
}

[data-width="thin"] {
  border-width: thin;
}

[data-width="medium"] {
  border-width: medium;
}

[data-width="thick"] {
  border-width: thick;
}

[data-width="10px"] {
  border-width: 10px;
}

@supports not (border-width: hairline) {
  body::before {
    content: "Your browser does not support the 'hairline' value.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

Результат

Спецификации

Совместимость с браузерами

См. также

• <line-style> тип данных
• модуль фонов и границ CSS
• модуль базового пользовательского интерфейса CSS
• модуль промежутков CSS