CSS-свойство `border-style`

border-style — CSS-свойство сокращённой записи, которое задаёт стиль линий для всех четырёх сторон границы элемента.

Попробуйте

border-style: none;

border-style: dotted;

border-style: inset;

border-style: dashed solid;

border-style: dashed double none;

border-style: dashed groove none dotted;

<section id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

Составные свойства

Это свойство является сокращённой записью следующих 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