CSS border-top-right-radius — верхній правий кут
Властивість border-top-right-radius задає верхнє праве округлення кута грані елемента.
Властивість border-top-right-radius може бути використана разом з border (або будь-якої іншою властивістю, яка стилізує межі елементу) для того, щоб встановити межу, вона також може бути використана без задання інших спеціальних стилів для рамки.
В якості радіуса вказується будь-яке припустиме в CSS значення (px, cm, in, em і ін.), а також відсотки, в цьому випадку радіус округлення рахується від ширини блоку.
Необов'язкове друге значення призначене для створення еліптичного куточка, перше значення при цьому встановлює радіус по горизонталі, а друге - радіус по вертикалі. Якщо друге значення опущено воно копіюється з першого. Якщо будь-яке значення дорівнює нулю, то кут буде квадратним, а не округленим.
Округлення може бути кругом або еліпсом, або якщо одне зі значення дорівнює 0, округлення не відбудеться й кут зостанеться квадратним.
Тло елементу, котре може бути зображенням або кольором обрізається гранями, й також округлюється. Точна позиція округлення визначається значенням заданим властивості background-clip.
Загальний опис
автор: NagarD
- Нотатка
-
За допомогою
автор: Svitlanaborder-radiusможна встановити округлення для всіх кутів відразу.
Синтаксис
border-top-right-radius: length|% [length|%]|initial|inherit;Властивість border-top-right-radius може отримувати 4 значень:
-
length -
Визначає форму кута. Значення без задання дорівнює 0
автор: Svitlana -
% -
Визначає форму кута у %
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderTopRightRadius="25px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 4 | 5 | 10.5 | 12 | 9 | |
| відсотки | 4.0 | 4.0 | 5.0 | 10.5 | 9.0 | |
| еліптичні куточки | 1.0 | 3.5 | 3.0 | 10.5 | 9.0 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 4.2 | |
| відсотки | 2.1 | 4.0 | 5.0 | |
| еліптичні куточки | 2.1 | 3.5 | 3.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Заокруглюється лише верхній правий кут — решта лишаються прямими.
HTML
<div>Заокруглений тільки верхній правий кут.</div>CSS
div {
border: 2px solid;
border-top-right-radius: 2em;
padding: 12px;
}Приклад використання властивості
HTML
<div class="block"></div>CSS
.block {
width: 300px;
height: 200px;
background-color: #ddd;
border: 4px solid #666;
border-top-right-radius: 25px;
}Обом карткам задано border-radius: 14px 14px 0 0. У першій синя шапка вилазить прямими кутами за дугу; у другій ту саму картку обрізано через overflow: hidden.
HTML
<div class="card">
<div class="head">Без overflow: hidden</div>
<p>Кути дочірнього блока лишаються прямими й перекривають дугу картки.</p>
</div>
<div class="card clip">
<div class="head">З overflow: hidden</div>
<p>Тепер шапку обрізано по дузі батьківського елемента.</p>
</div>CSS
.card {
margin-bottom: 16px;
border: 1px solid #999;
border-radius: 14px 14px 0 0;
background: #fff;
font: 13px sans-serif;
}
.head {
padding: 10px;
color: #fff;
background: #0172ad;
}
.card p {
margin: 8px 0 0;
padding: 0 10px 10px;
}
.clip {
overflow: hidden;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-top-right-radius</strong>.</p>
<p>Вона встановлює ступінь заокруглення для для верхнього правого кута кордону елемента на сторінці.</p>
<strong>border-top-right-radius: </strong>
<input type="number" class="input" id="num" value="24" min="0">px
<strong>;</strong>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
height: 100vh;
padding: 16px;
}
.box {
background-color: #f7f7f7;
padding: 16px;
border: 8px solid #F74C32;
border-top-right-radius: 24px;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var num = document.querySelector('#num').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-top-right-radius', num + 'px'));
}));Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border-top-right-radius</code> ми можемо заокруглити правий верхній кут кордону елемента.</p>
<p>Ви бачите три блоки з ідентичним загальним кордоном, але два останніх мають заокруглений кут.</p>
</div>
<div class="wrapper">
<div class="block"></div>
<div class="block proc"></div>
<div class="block px"></div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
line-height: 1.45;
}
.info {
padding: 4px 16px 8px 16px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.block {
width: 150px;
height: 150px;
background-color: gold;
border: 16px solid #444;
}
.block.proc {
border-top-right-radius: 45%;
}
.block.px {
border-top-right-radius: 40px;
}HTML
<div class="block">
<p>Як бачимо, фонове зображення округлилося разом із межею...</p>
</div>CSS
.block {
width: 650px;
height: 450px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='940' height='650' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E") center center no-repeat;
background-size: cover;
border: 10px solid #444;
border-top-right-radius: 50%;
font-family: sans-serif;
font-size: 18px;
color: #fff;
font-weight: 700;
padding-top: 300px;
box-sizing: border-box;
text-align: left;
padding-left: 5px;
}Коментарі
Коментарів ще немає — будьте першим!