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

Определение и применение

CSS свойство border-right устанавливает все свойства правой границы в одном объявлении. Разрешается использовать объявление в котором одно из значений отсутствует.

Свойства, которые можно установить:

• ширина правой границы - border-right-width (medium | thin | thick | length | initial | inherit).
• стиль правой границы - border-right-style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit).
• цвет правой границы - border-right-color (color | transparent | initial | inherit).

Попробуйте значения border-right

<div class="demo-target">Рамка элемента</div>

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border-right: 0;
}

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border-right: 3px solid #245a85;
}

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border-right: 8px dashed #b53625;
}

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border-right: 8px double #245a85;
}

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

Спецификация: CSS backgrounds

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.border-right

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
border-right	✓1	✓12	✓1	✓9.2	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
currentColor	✓1	✓12	✓1.5	✓9.5	✓4	✓18	✓4	✓14	✓3.2	✓1.0	✓37	✓3.2
dashed	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
dotted	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
double	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
groove	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
hidden	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
inset	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
medium	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
none	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
outset	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
ridge	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
solid	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
thick	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
thin	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
transparent	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
Ещё 15 значений · ✓ поддерживаются везде более 3 летСвернуть

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

border-right: <line-width> || <line-style> || <color>;

/* Глобальные значения */
border-right: initial | inherit | unset | revert | revert-layer;

|| — одно или несколько значений в любом порядке.

JavaScript синтаксис:

element.style.borderRight = "3px solid orange";

Начальное значение свойства

• border-right-width — medium;
• border-right-style — none;
• border-right-color — currentcolor.

Значения свойства

Спецификация

CSS Backgrounds and Borders — спецификация border-right.

Наследуется

Нет.

Анимируемое

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

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

Правая граница

Измените толщину правой границы с 4px на 12px, затем сравните solid и dashed. Остальные стороны не имеют границы.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 20px;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.sample {
    min-height: 130px;
    padding: 20px;
    background: #eef2f5;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Правая граница</title>
  </head>
  <body>
    <div class="comparison">
      <section>
        <h3>Вариант A</h3>
        <div class="sample first">Содержимое блока</div>
      </section>
      <section>
        <h3>Вариант B</h3>
        <div class="sample second">Содержимое блока</div>
      </section>
    </div>
  </body>
</html>

style.css

CSS

.first {
    border-right: 4px solid #35658a;
}
.second {
    border-right: 8px dashed #a95820;
}