border-style

Это свойство является сокращением для следующих свойств CSS:

• border-bottom-style
• border-left-style
• border-right-style
• border-top-style

/* Keyword values */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;

Свойство border-style можно задать с помощью одного, двух, трёх или четырёх значений.

• При указании одного значения, одинаковый стиль применяется ко всем четырём сторонам.
• При указании двух значений, первый стиль применяется к верхней и нижней сторонам, второй — к левой и правой.
• При указании трёх значений, первый стиль применяется к верхней, второй — к левой и правой, третий — к нижней сторонам.
• При указании четырёх значений, стили применяются к верхней, правой, нижней и левой сторонам в этом порядке (по часовой стрелке).

Каждое значение — это ключевое слово из списка ниже.

<line-style>

Описывает стиль границы. Он может иметь следующие значения:

none

Как ключевое слово hidden, не отображает границу. Если не задан background-image, вычисленное значение ширины границы этой стороны (border-width) будет 0, даже если указано другое значение. В случае с ячейками таблицы и схлопыванием границ, значение none имеет наименьший приоритет: если установлена любая другая конкурирующая граница, она будет отображена.

hidden

Как ключевое слово none, не отображает границу. Если не задан background-image, вычисленное значение ширины границы этой стороны (border-width) будет 0, даже если указано другое значение. В случае с ячейками таблицы и схлопыванием границ, значение hidden имеет наивысший приоритет: если установлена любая другая конкурирующая граница, она не будет отображена.

dotted

Отображает ряд округлённых точек. Интервал между точками не определён спецификацией и зависит от реализации. Радиус точек составляет половину вычисленного значения ширины границы этой стороны (border-width).

dashed

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

solid

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

double

Отображает две прямые линии, которые в сумме составляют размер в пикселях, определённый свойством border-width.

groove

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

ridge

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

inset

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

outset

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

border-style = 
  <line-style>{1,4}  

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

Вот пример всех значений свойства.

HTML

<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>

CSS

pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/* border-style example classes */
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}

Результат

• Сокращенные CSS свойства, связанные с границами: border, border-width, border-color, border-radius