W3docs
ru
Войти

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

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

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

Вместо трёх правил можно написать одно:

/* shorthand */
border-right: 3px solid #1c87c9;

/* equivalent longhand */
border-right-width: 3px;
border-right-style: solid;
border-right-color: #1c87c9;

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

  • Если стиль опущен, граница вообще не отображается — border-right-style по умолчанию равен none, поэтому для отображения границы стиль нужно указывать обязательно.
  • Если ширина опущена, по умолчанию используется medium.
  • Если цвет опущен, граница принимает значение свойства color элемента; если и оно не задано, используется текущий цвет текста (по умолчанию чёрный).

Когда применять border-right

Используйте border-right, когда нужна линия только с одной стороны блока — например, вертикальный разделитель между боковой панелью и основным содержимым, декоративный акцент на карточке или разделитель в виде подчёркивания, повёрнутый вертикально. Если нужна одинаковая граница со всех четырёх сторон, используйте сокращение border; для остальных отдельных сторон смотрите border-left, border-top и border-bottom.

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

Синтаксис

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

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

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

Пример свойства CSS border-right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-right: 5px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-right example</h2>
    <div> This is a simple example for the border-right property.</div>
  </body>
</html>
Попробуйте сами »

Результат

![Свойство CSS border-right](/uploads/media/default/0001/03/4218a03bd607afbe39ebf9286536c0c363499170.png "CSS border-right example" =420x)

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

Пример свойства border-right с несколькими значениями:

Пример свойства CSS border-right со значениями solid, dotted и double

<!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>A heading with a solid green right border</h1>
    <p>A heading with a dotted blue right border.</p>
    <div>A div element with a thick double right border.</div>
  </body>
</html>
Попробуйте сами »

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

Пример использования border-right для создания стильного блока:

Пример свойства CSS border-right со значением solid

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        height: 80px;
        text-align: center;
        padding: 20px;
        background: #ccc;
        border-right: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div>This box has a solid border on the right side.</div>
  </body>
</html>
Попробуйте сами »

Советы и особенности

  • Всегда указывайте стиль. Если написать только border-right: 2px #1c87c9;, граница не отобразится, так как стиль по умолчанию равен none. Добавьте ключевое слово, например solid.
  • Порядок значений гибкий. border-right: solid 5px red; и border-right: 5px solid red; равнозначны.
  • Сокращение сбрасывает пропущенные части. Написав border-right: 5px solid;, вы сбросите цвет до текущего цвета текста, даже если ранее задавали border-right-color. Используйте полные свойства, когда нужно изменить только одну составляющую, не затрагивая остальные.
  • Границы увеличивают размер элемента в макете, если не задано box-sizing: border-box, так как значение по умолчанию content-box добавляет ширину границы к общей ширине элемента.

Значения

Сокращение принимает значения трёх составляющих свойств, а также общие ключевые слова CSS:

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

Практика

Практика
Какие атрибуты можно задать при работе со свойством border-right в CSS?
Какие атрибуты можно задать при работе со свойством border-right в CSS?

Связанные свойства

Was this page helpful?