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

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

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

Если цвет не установлен, значение будет выбрано из свойства color. Если свойство color не установлено, будет выбран черный цвет по умолчанию.

Если свойство width не установлено, будет выбран средний размер элемента.

Значение по умолчанию medium none currentColor
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Да. Толщина и цвет границы анимируемы.
Версия CSS1
DOM синтаксис object.style.borderRight = "1px solid black";

Синтаксис

border-right: border-width border-style border-color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      border-right: 5px solid #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-right example</h2>
    <div>Простой пример для свойства border-right.</div>
  </body>
</html>

Свойство border-right может быть применен к разным элементам и может иметь разные значения стилей.

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1, p, div {
      padding: 10px;
      }
      h1 {
      border-right: 7px solid #8ebf42;
      }
      p {
      border-right: 5px dotted #1c87c9;
      }
      div {
      border-right: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок с правой границей solid green.</h1>
    <p>Заголовок с правой границей dotted blue.</p>
    <div>div элемент с правой границей thick double.</div>
  </body>
</html>

Можно создать блок с <div> элементом, установить background-color для блока и дальше добавить правую границу.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      width: 300px;
      height: 80px;
      text-align: center;
      padding: 20px;
      background: #ccc;
      border-right: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div>Блок имеет solid  границу с правой стороны.</div>
  </body>
</html>

Значения

Значение Описание
border-right-width Устанавливает толщину правой границы элемента. Значение по умолчанию - "medium". Необходимое значение.
border-right-style Устанавливает стиль линии правой границы элемента. Значение по умолчанию - "none". Необходимое значение.
border-right-color Устанавливает цвет правой границы элемента. Значение по умолчанию - текущий цвет текста.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1+ 1+ 1+ 9.2+

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

Какие из следующих приемов можно использовать для определения стиля правой границы элемента с использованием CSS?
Считаете ли это полезным?