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	Значение элемента наследуется от родительского элемента.