Встановлює радіус заокруглення правого нижнього куточка рамки. Якщо рамка не задана, то округлення також відбувається і з фоном.
| Значення за замовчуванням | 0 |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Так |
Синтаксис
<code>border-bottom-right-radius: [значення | відсотки] [значення | відсотки]
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у зазначеному порядку . | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
В якості радіусу вказується будь-яке допустиме в CSS значення (px, cm, in, em та ін), а також відсотки, у цьому випадку радіус заокруглення вважається від ширини блоку.
Необов'язкове друге значення призначене для створення еліптичного куточка, перше значення ення при цьому встановлює радіус по горизонталі, а друге — радіус по вертикалі (рис. 1).-right-radius_1.png" alt="Радіус заокруглення для створення різних типів куточків" width="511" height="169">
Мал. 1. Радіус заокруглення для створення різних типів куточків
Пісочниця
div { background: #e4efc7; border: 1px solid #333; padding: 10px; border-bottom-right-radius: <span class="playground-active">{{ playgroundValue }}px</span>; }Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-bottom-right-radius</title> <style> .radius { background: #fc0; padding: 15px; margin-bottom: 10px; }
</style>
</head>
<body> <div style="border-bottom-right-radius: 20px" class="radius"> border-bottom-right-radius: 20px
</div> <div style="border-bottom-right-radius: 70px 40px" class="radius"> border-bottom-right-radius: 70px 40px
</div>
</body>
</html>Результат даного прикладу показаний на мал. 2.
Мал. 2. Радіус заокруглення
Об'єктна модель
Об'єкт .style.borderBottomRightRadius
Примітка
Chrome до версії 4.0, Safari до версії 5.0 та Android до версії 2.1 використовують властивість -webkit-border-bottom-right-radius.
Firefox до версії 4.0 використовує властивість -moz-border-radius-bottomright.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Можлива рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт .
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| Базовий синтаксис | 9 | 12 | 1 | 4 | 10.5 | 3 | 5 | 1 | 4 |
| Відсотки | 9 | 12 | 4 | 10.5 | 5 | 4 | |||
| Еліптичні куточки | 9 | 12 | 1 | 10.5 | 3 | 3.5 | |||
| Базовий синтаксис | 1 | 2.1 | 1 | 4 | 10.5 | 3 | 5 |
| Відсотки | 2.1 | 4 | 10.5 | 5 | |||
| Еліптичні куточки | 2.1 | 3.5 | 10.5 | 3 | |||
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість п повністю підтримується браузером з усіма допустимими значеннями;
- ;— властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.
Число вказує версію браузера, починаючи з якої властивість підтримується.