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

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

Толщина правой границы, а также все другие границы, могут быть установлены сокращенным свойством border или border-width.

Для установления border-right-width необходимо сначала установить свойство border-style, так как нужны границы, чтобы суметь определить их толщину.

Можно использовать border-right-style или border-style для установления стиля границы.

Данная спецификация не устанавливает точную толщину каждого ключевого слова, но всегда действует следующая последовательность: thin ≤ medium ≤ thick.
Данная спецификация не устанавливает как соединяются в углах границы, имеющие разные стили и толщины.
Значение по умолчанию medium
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Да. Толщина границы анимируема.
Версия CSS1
DOM синтаксис object.style.borderRightWidth = "5px";

Синтаксис

border-right-width: medium | thin | thick | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      padding: 8px;    
      width: 50%;         
      border-style: dotted;
      border-right-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-right-width</h2>
    <p>Установлена толщина thick для правой границы.</</p>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #ccc;
      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;
      border: solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-right-width example classes */
      .b1 {border-right-width: medium;}
      .b2 {border-right-width: thin;}
      .b3 {border-right-width: thick;}
      .b4 {border-right-width: 10px;}
      .b5 {border-right-width: initial;}
      .b6 {border-right-width: inherit;}
    </style>
  </head>
  <body>
    <h2>Примеры значения border-right-width</h2>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div  class="b2">
        thin
      </div>
      <div  class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div  class="b4">
        10px lenght
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
    </div>
    </main>
  </body>
</html>

Значения

Значение Описание
medium Устанавливает толщину medium для правой границы. Является значением по умолчанию для этого свойства.
thin Устанавливает толщину thin для правой границы. Пользователь может сам установить необходимую толщину.
thick Устанавливает толщину thick для правой границы. Пользователь может сам установить необходимую толщину.
length Устанавливает длину правой границы. Например, 10px, 5em, 8pt, и т.д.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1+ 1+ 1+ 3.5+

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

Что из нижеприведенного является верным синтаксисом для CSS свойства 'border-right-width'?
Считаете ли это полезным?