Встановлює радіус заокруглення куточків рамки. Якщо рамка не задана, то округлення також відбувається і з фоном.
Коротка інформація
| Значення за замовчуванням | 0 |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів, за винятком таблиць з border-collapse: collapse |
| Анімується | Так |
Синтаксис
<code>border-radius: <радіус>{1,4}
[ /<радіус>{1,4}]</code></p> re>
</div>
</div> <b-modal :active.sync="isHintSyntax">
<h2>Позначення</h2> <table> <tbody> <tr> <th></th> <th> Опис</th> <th style="width: 130px">Приклад</th>
</tr> <tr>
<td><тип></td>
<td>Вказує тип значення.</td>
<td><розмір></td>
</tr> <tr>
<td>A && B</td>
<td>Значення повинні виводитися в зазначеному порядку.</td>
<td> <розмір> && <колір></td>
</tr> <tr>
<td>A | B</td>
<td>Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).</td>
<td>normal | small-caps</td>
</tr> <tr>
<td>A || B</td>
<td>Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.</td>
<td>width || count</td>
</tr> <tr>
<td>[ ]</td>
<td>Групує значення.</td>
<td>[ crop || cross ]</td>
</tr> <tr>
<td>*</td>
<td>Повторювати нуль або більше разів.</td>
<td>[,<час>]*</td>
</tr> <tr>
<td>+</td>
<td>Повторювати один або більше разів.</td>
<td><число>+</td>
</tr> <tr>
<td>? </td>
<td>Вказаний тип, слово або група не є обов'язковим.</td>
<td>inset?</td>
</tr> <tr>
<td>{A, B}</td>
<td>Повторювати не менше A, але не більше B разів.</td>
<td><радіус>{1,4}</td>
</tr> <tr>
<td>#</td>
<td>Повторювати один або більше разів через кому.</td>
<td><час>#</td>
</tr> </tbody>
</table> </b-modal><div class="field field-name-field-css-value field-type-text-long field-label-above">
<h2 class="block_title" id="field_css_value">Значення</h2>
<div class="field-items">
<div class="field-item even"><p>Дозволяється використовувати одне, два, три або чотири значення, перераховуючи їх через пробіл (табл. 1). Також допустимо писати два значення через косу межу (/). Як значення вказуються числа у будь-якому допустимому для CSS форматі. У разі застосування відсотків відлік ведеться щодо ширини блоку.</p> <table class="data"> <caption> Табл. 1. Залежність від числа значень </caption> <tr> <th>Кількість значень</th> <th>Результат</th>
</tr> <tr>
<td class="sel">1</td>
<td align="left">Радіус вказується для всіх чотирьох куточків.</td>
</tr> <tr>
<td class="sel">2</td>
<td align="left">Перше значення задає радіус верхнього лівого та нижнього правого куточків, друге значення — верхнього правого та нижнього лівого куточків.</td>
</tr> <tr>
<td class="sel">3</td>
<td align="left">Перше значення встановлює радіус для верхнього лівого куточка, друге одночасно для верхнього правого і нижнього лівого кутників, а третє для нижнього правого куточка.</td>
</tr> <tr>
<td class="sel"> 4</td>
<td align="left">По черзі встановлює радіус для верхнього лівого, верхнього правого, нижнього правого та нижнього лівого куточків.</td>
</tr>
</table>
<p>У разі завдання двох параметрів через косу межу, то перший параметр ставить радіус по горизонталі, а другий по вертикалі (еліптичні куточки). На рис. 1 показана різниця між звичайним закругленим куточком та еліптичним куточком.</p> <p class="fig"><img src="/assets/images/css/css_border-radius_1.png" alt="Радіус заокруглення для створення різних типів куточків" width="506" height="207"></p> <p class="figsign">Мал. 1. Радіус заокруглення для створення різних типів куточків</p>
</div>
</div>
</div>
<div class="field name-field-css-playground field-type-text-long field-label-above">
<h2 class="block_title" id="field_css_playground">Пісочниця</h2>
<div class="field-items">
<div class="field-item even"><div class="playground-result" style="transition: none;">
<div style="background: #e4efc7; padding: 10px; border: 1px solid #333;" :style="{ 'border-radius': playgroundValue + 'px'}">Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок вже давно закінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.
</div>
</div>-tablet is-6-desktop playground-values"> <input type="range" min="0" max="50" value="0" v-model="playgroundValue">
</div>
<div class="column is-12-mobile is-12-tablet is-6-desktop playground-code"><pre>div { background: #e4efc7; border: 1px solid #333; padding: 10px; border-radius: <span class="playground-active">{{ playgroundValue }}px</span>; }