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

❮ Назад Вперед ❯

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

Свойство border-style используется для установления стиля всех сторон элемента, но border-right-style устанавливает стиль только для правой границы.

Толщина правой границы по умолчанию - medium. Она может быть изменена используя свойство border-right-width или border-width.

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

Данная спецификация не устанавливает каким должно быть расстояние между точками и пунктирами.

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

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-right-style: solid;
      }
      p {
      border-right-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Пример с solid border-right-style.</h2>
    <p>Параграф с dotted border-right-style.</p>
  </body>
</html>

Попробуйте сами!

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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: #1c87c9;
      border: 10px solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-right-style example classes */
      .b1 { border-right-style: hidden; }
      .b2 {border-right-style: dotted;}
      .b3 {border-right-style: dashed;}
      .b4 {border-right-style: solid;}
      .b5 {border-right-style: double;}
      .b6 {border-right-style: groove;}
      .b7 {border-right-style: ridge;}
      .b8 {border-right-style: inset;}
      .b9 {border-right-style: outset;}
    </style>
  </head>
  <body>
    <h2>Примеры значения border-right-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-right-style к ячейкам таблицы.
dotted	Точечная граница.
dashed	Пунктирная граница.
double	Двойная граница.
solid	Сплошная граница.
groove	Отображает границы с 3D groove эффектом. Эффект может быть изменен с помощью значения border-color.
ridge	Отображает границы с 3D ridge эффектом. Эффект может быть изменен с помощью значения border-color.
inset	Отображает границы с 3D inset эффектом. Эффект может быть изменен с помощью значения border-color.
outset	Отображает границы с 3D outset эффектом. Эффект может быть изменен с помощью значения border-color.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.