Свойство CSS border-right-width
Свойство border-right-width используется для определения ширины правой границы элемента. Ширину правой границы, а также всех остальных сторон границы, также можно задать с помощью сокращённых свойств border или border-width.
Чтобы задать border-right-width, сначала необходимо определить свойство border-style, так как границы должны существовать, прежде чем задавать их ширину. Для указания стиля границы можно использовать border-right-style или border-style.
INFO
В спецификации не определена точная толщина для каждого ключевого слова. Однако они всегда следуют этому порядку: thin ≤ medium ≤ thick.
INFO
В спецификации не указано, как границы разной ширины и стиля соединяются в углах.
| Начальное значение | medium |
|---|---|
| Применяется ко | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимация | Да. Ширина границы может анимироваться. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.borderRightWidth = "5px"; |
Синтаксис
Синтаксис свойства CSS border-right-width
border-right-width: medium | thin | thick | length | initial | inherit;Пример свойства border-right:
Пример использования свойства CSS border-right-width со значением thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
width: 50%;
border-style: dotted;
border-right-width: thick;
}
</style>
</head>
<body>
<h2>Border-right-width example</h2>
<p>As you can see the width of the right border is set to thick.</p>
</body>
</html>Пример свойства border-right со всеми значениями:
Пример использования свойства CSS border-right-width со значениями medium, thin, thick, px, initial и inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-right-width example classes */
.b1 {
border-right-width: medium;
}
.b2 {
border-right-width: thin;
}
.b3 {
border-right-width: thick;
}
.b4 {
border-right-width: 10px;
}
.b5 {
border-right-width: initial;
}
.b6 {
border-right-width: inherit;
}
</style>
</head>
<body>
<h1>Border-right-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px lenght
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Результат
Значения
| Значение | Описание | Запустить |
|---|---|---|
| medium | Определяет среднюю правую границу. Это значение по умолчанию для данного свойства. | Запустить » |
| thin | Определяет тонкую правую границу. Точная ширина определяется браузером. | Запустить » |
| thick | Определяет толстую правую границу. Точная ширина определяется браузером. | Запустить » |
| length | Определяет длину толщины правой границы. Например, 10px, 5em, 8pt и т. д. | Запустить » |
| initial | Устанавливает свойству его значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что указывает CSS-свойство 'border-right-width'?