Тип CSS `<line-style>`

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

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

Синтаксис

Значения

Перечисляемый тип <line-style> задаётся одним из перечисленных ниже значений:

none

Линия не отображается. Используемое значение ширины линии равно 0, даже если задано значение ширины. При схлопывании границ ячеек таблицы значение none имеет наименьший приоритет. Если задана любая другая конфликтующая граница, она будет отображена. Значение none аналогично значению hidden.

hidden

Линия не отображается. Используемое значение ширины линии равно 0, даже если задано значение ширины. При схлопывании границ ячеек таблицы значение hidden имеет наивысший приоритет. Если задана любая другая конфликтующая граница, она не будет отображена. Значение hidden аналогично значению none, но hidden не является допустимым значением для стилей контура.

dotted

Отображает последовательность круглых точек. Радиус точек равен половине вычисленного значения ширины линии. Спецификация не определяет расстояние между точками — оно зависит от реализации.

dashed

Отображает последовательность коротких штрихов с квадратными концами или отрезков линии. Спецификация не определяет точный размер и длину отрезков — они зависят от реализации.

solid

Отображает одну прямую сплошную линию.

double

Отображает две прямые линии с промежутком между ними. Суммарная длина линий соответствует размеру в пикселях, заданному шириной линии.

groove

Отображает границу с вырезанным рельефом. Это значение противоположно значению ridge.

ridge

Отображает границу с выступающим рельефом. Это значение противоположно значению groove.

inset

Отображает границу, из-за которой элемент выглядит утопленным. Это значение противоположно значению outset. Для границы ячейки таблицы, если свойство border-collapse установлено в collapsed, это значение ведёт себя как groove.

outset

Отображает границу, из-за которой элемент выглядит выпуклым. Это значение противоположно значению inset. Для ячейки таблицы, если свойство border-collapse установлено в collapsed, это значение ведёт себя как ridge.

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

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Примеры

В первом примере показаны все значения-ключевые слова <line-style>. Во втором примере показано, как некоторые цвета стилей линий могут отображаться неожиданным образом.

Определение стилей линий

В этом примере показаны все значения <line-style> в качестве значений свойств CSS border-style и column-rule-style.

HTML

В этом примере используется несколько элементов <div>, каждому из которых присвоен класс, соответствующий демонстрируемому значению <line-style>.

<div class="{line-style}">
  <p>{line-style}</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

<div class="none">
  <p>none</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="hidden">
  <p>hidden</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="dotted">
  <p>dotted</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="dashed">
  <p>dashed</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="solid">
  <p>solid</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="double">
  <p>double</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="groove">
  <p>groove</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="ridge">
  <p>ridge</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="inset">
  <p>inset</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="outset">
  <p>outset</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

CSS

В CSS этого примера для всех элементов <p> задаются ширина границы и правила столбца 7px и значение стиля double. Затем для каждого абзаца значение double переопределяется: для свойств border-style и column-rule-style задаётся другое значение <line-style>.

div {
  display: flex;
  gap: 1em;
  list-style: none;
  align-items: center;
}
div:first-of-type {
  display: none;
}

p:first-of-type {
  text-align: center;
  line-height: 5em;
}
p {
  width: 10em;
  height: 5em;
  background-color: palegoldenrod;
}

p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: black;
}
.none p {
  border-style: none;
  column-rule-style: none;
}
.hidden p {
  border-style: hidden;
  column-rule-style: hidden;
}
.dotted p {
  border-style: dotted;
  column-rule-style: dotted;
}
.dashed p {
  border-style: dashed;
  column-rule-style: dashed;
}
.solid p {
  border-style: solid;
  column-rule-style: solid;
}
.double p {
  border-style: double;
  column-rule-style: double;
}
.groove p {
  border-style: groove;
  column-rule-style: groove;
}
.ridge p {
  border-style: ridge;
  column-rule-style: ridge;
}
.inset p {
  border-style: inset;
  column-rule-style: inset;
}
.outset p {
  border-style: outset;
  column-rule-style: outset;
}

Результат

Обратите внимание: чёрная граница не всегда чёрная.

Определение стилей и цветов линий

В этом примере показан выбор стиля и цвета линии. Для некоторых значений-ключевых слов <line-style> цвет линии может оказаться не таким, как вы ожидаете. Чтобы создать необходимый эффект «3D» для стилей groove, ridge, inset и outset при отображении этих значений чёрным или белым цветом, пользовательские агенты используют другие вычисления цвета, чем для любых других сочетаний цветов линии.

CSS

Для четырёх сторон каждого элемента <div> задано разное значение <line-style>, а каждому элементу списка — своё значение <color>. Для отображения CSS, объявленного во встроенном коде, мы используем генерируемое содержимое.

body {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  text-transform: uppercase;
  font-family: monospace;
}

div {
  border-width: 10px;
  border-style: inset groove ridge outset;
  padding: 5px;
}

JavaScript

JavaScript динамически создаёт элементы <div>, каждому из которых задано своё значение border-color.

// prettier-ignore
const colors = [
  "#000000", "#000001", "#ffffff",
  "#ff00ff", "#ffff00", "#00ffff",
  "#cc33cc", "#cccc33", "#33cccc",
  "#ff0000", "#00ff00", "#0000ff",
  "#cc3333", "#33cc33", "#3333cc",
  "#993333", "#339933", "#333399",
];

for (const c of colors) {
  const div = document.createElement("div");
  div.style.borderColor = c;
  div.textContent = c;
  document.body.appendChild(div);
}

Результат

Обратите внимание: почти чёрный цвет #000001 может отличаться от настоящего чёрного, а контраст между тёмными и светлыми краями заметнее при использовании более светлых цветов.

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

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

См. также

• <line-width> тип данных
• модуль CSS «Фоны и границы»
• модуль CSS «Базовый пользовательский интерфейс»
• модуль CSS «Промежутки»
• модуль CSS «Многоколоночная компоновка»