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

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

Это свойство принимает от одного до четырёх значений. Поэтому каждая сторона может иметь своё значение.

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

Также нужно знать, что некоторые браузеры не поддерживают некоторые стили. Обычно, когда стиль не поддерживается, браузер отображает границу как сплошную.

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

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

Синтаксис

Синтаксис свойства CSS border-style

css

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

Пример свойства border-style:

Пример свойства CSS border-style со значением dotted

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-style: dotted;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Example of dotted border-style.</p>
  </body>
</html>

Try it Yourself »

Пример свойства border-style, где каждая сторона имеет своё значение:

Пример свойства CSS border-style со значениями double, solid, dashed и dotted

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-width: 4px;
        border-style: double solid dashed dotted;
        border-color: #1c87c9;
        color: #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Example, where each side has own value.</p>
  </body>
</html>

Try it Yourself »

Результат

CSS border-style Property

Пример свойства border-style со всеми значениями:

Пример свойства CSS border-style со значениями hidden, double, solid, dashed ,dotted, groove,ridge, inset and outset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>
    <h1>Border-style value examples</h1>
    <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>

Try it Yourself »

Значения

Значение	Описание	Play it
none	Не будет отображать границу. Значение по умолчанию.	Play it »
hidden	То же, что и "none", за исключением разрешения конфликтов границ для таблиц.	Play it »
dotted	Граница задаётся в виде серии точек.	Play it »
dashed	Граница задаётся в виде серии штрихов.	Play it »
solid	Граница задаётся как сплошная линия.	Play it »
double	Граница задаётся как двойная сплошная линия.	Play it »
groove	Это 3D-бордюр с желобком, создающий впечатление, что граница вырезана. Противоположность ridge.	Play it »
ridge	Задаёт 3D-бордюр с выступом и создаёт впечатление рельефной границы. Противоположность groove.	Play it »
inset	Это 3D-эффект, создающий впечатление, что элемент вдавлен внутрь. Противоположность outset.	Play it »
outset	Это 3D-эффект, создающий впечатление, что элемент выступает наружу. Противоположность inset.	Play it »
initial	Устанавливает свойство в значение по умолчанию.	Play it »
inherit	Наследует свойство от родительского элемента.

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

Синтаксис ​

Пример свойства border-style: ​

Пример свойства border-style, где каждая сторона имеет своё значение: ​

Результат ​

Пример свойства border-style со всеми значениями: ​

Значения ​

Практика ​

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

Синтаксис

Пример свойства border-style:

Пример свойства border-style, где каждая сторона имеет своё значение:

Результат

Пример свойства border-style со всеми значениями:

Значения

Практика