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	Значение элемента наследуется от родительского элемента.