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

CSS свойство border-style устанавливает все границы элемента. Это сокращенное свойство для установления border-top-style, border-bottom-style, border-left-style, border-right-style.

Свойство может иметь от одного до четырёх значений. Каждая сторона может иметь своё значение.

Значение по умолчанию для border-style - none. Границы расположены с верхней стороны фоновой части элемента.

Некоторые браузеры могут не поддерживать какой-то стиль. Обычно, если стиль не поддерживается, браузер отображает границы как solid.

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

Значение по умолчанию none
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.borderStyle = "dotted double";

Синтаксис

border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border-style: dotted;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Пример dotted border-style.</p>
  </body>
</html>

В данном примере все стороны имеют одинаковое значение. Рассмотрим пример, где каждая сторона имеет своё значение:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border-width: 4px;
      border-style: double solid dashed dotted;
      border-color: #1c87c9;
      color: #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Пример, где каждая сторона имеет своё значение.</p>
  </body>
</html>

Пример, где использованы все четыре значения:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #eee;
      font-size: 20px;
      text-align: center;
      }
      main div {
      display: flex;
      align-items: center;      
      justify-content: center;
      color: black;
      padding-top: 30px;
      padding-bottom: 30px;
      width: 200px;
      height: 100px;
      margin: 15px;
      font-weight: bold;
      background-color: #c9c5c5;
      border: 8px solid #1c87c9;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-style example classes */
      .b1 { border-style: hidden; }
      .b2 { border-style: dotted;}
      .b3 { border-style: dashed;}
      .b4 { border-style: solid;}
      .b5 { border-style: double;}
      .b6 {border-style: groove;}
      .b7 {border-style: ridge;}
      .b8 {border-style: inset;}
      .b9 {border-style: outset;}
    </style>
  </head>
  <body>
    <h2>Примеры значения border-style</h2>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div  class="b2">
        dotted
      </div>
      <div  class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div  class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Значения

Значение Описание
none Указывает на отсутствие границы. Значение по умолчанию.
hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы.
dotted Точечная граница.
dashed Пунктирная граница.
double Двойная граница.
solid Сплошная граница.
groove Отображает границы с 3D groove эффектом и создает впечатление, что граница вырезана. Противоположный эффекту ridge.
ridge Отображает границы с 3D ridge эффектом и создает впечатление, что граница выдвинута. Противоположный эффекту groove.
inset 3D эффект, создающий впечатление вложенного элемента. Противоположный эффекту outset.
outset 3D эффект, создающий впечатление выпуклого элемента. Противоположный эффекту inset.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Какие значения могут быть установлены для CSS свойства 'border-style'?
Считаете ли это полезным?