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

Свойство CSS border-left-style задаёт стиль левого края элемента. Оно определяется как одно ключевое слово, выбираемое из списка доступных для свойства border-style. В отличие от border-style, который задаёт стиль для всех четырёх сторон, border-left-style устанавливает стиль только для левого края.

Ширина левого края по умолчанию равна medium. Её можно изменить с помощью свойства border-left-width или border-width.

Не все браузеры отображают стили одинаково. Например, Chrome отображает точки в виде прямоугольных, а не круглых.

INFO

В спецификации не указано точное расстояние между точками и штрихами.

INFO

В спецификации не определено, как соединяются границы разных стилей в углах.

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

Синтаксис

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

css

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

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

Пример использования свойства CSS border-left-style со значениями solid и dotted

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-left-style: solid;
      }
      div {
        border-left-style: dotted;
      }
    </style>
  </head>
  <body>
    <p> Example with solid border-left-style.</p>
    <div>Example with dotted border-left-style.</div>
  </body>
</html>

Try it Yourself »

INFO

В зависимости от значения border-color эффекты значений groove, ridge, inset и outset могут изменяться.

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #c9c5c5;
        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: #8ebf42;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-left-style example classes */
      .b1 {
        border-left-style: hidden;
      }
      .b2 {
        border-left-style: dotted;
      }
      .b3 {
        border-left-style: dashed;
      }
      .b4 {
        border-left-style: solid;
      }
      .b5 {
        border-left-style: double;
      }
      .b6 {
        border-left-style: groove;
      }
      .b7 {
        border-left-style: ridge;
      }
      .b8 {
        border-left-style: inset;
      }
      .b9 {
        border-left-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-left-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 »

Результат

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

Значения

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

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

Синтаксис ​

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

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

Результат ​

Значения ​

Практика ​

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

Синтаксис

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

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

Результат

Значения

Практика