Свойство CSS border-right
Свойство CSS border-right устанавливает ширину, стиль линии и цвет правой границы элементов. Это сокращённое свойство для задания значений следующих свойств:
Эти три значения сокращённого свойства могут быть указаны в любом порядке, и одно или два из них могут быть опущены.
Если цвет не указан, значение будет взято из свойства color. Если свойство color не определено, по умолчанию будет использоваться чёрный цвет.
Если width не указан, будет использован размер «medium» (средний).
| Значение по умолчанию | medium none currentColor |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимация | Да. Ширина и цвет поддаются анимации. |
| Версия | CSS1 |
| Синтаксис DOM | object.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>Результат
Свойство 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-width | Устанавливает ширину правой границы элемента. Значение по умолчанию — «medium». Обязательное значение. |
| border-right-style | Устанавливает стиль линии правой границы элемента. Значение по умолчанию — «none». Обязательное значение. |
| border-right-color | Устанавливает цвет правой границы элемента. Значение по умолчанию — текущий цвет текста. |
| initial | Устанавливает свойству его значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие атрибуты можно указать при работе со свойством border-right в CSS?