border-radius

Опис CSS властивості border-radius:

Встановлює радіус скруглення куточків рамки. Якщо рамка не задана, то зкруглення також відбувається і з фоном.

Синтаксис CSS властивості border-radius:

border-radius: <радіус>{1,4} [ / <радіус>{1,4}]

Аргументи CSS властивості border-radius:

Дозволяється використовувати одне, два, три або чотири значення, перераховуючи їх через пробіл. Також допустимо писати два значення через слеш (/). Як значення вказуються числа в будь-якому допустимому для CSS форматі. У разі застосування відсотків, відлік ведеться щодо ширини блоку.
1 Радіус вказується для всіх чотирьох куточків.
2 Перше значення задає радіус верхнього лівого і нижнього правого куточка, друге значення - верхнього правого і нижнього лівого кутка.
3 Перше значення задає радіус для верхнього лівого кута, друге - одночасно для верхнього правого і нижнього лівого, а третє - для нижнього правого куточка.
4 По черзі встановлює радіус для верхнього лівого, верхнього правого, нижнього правого і нижнього лівого кутка.
У разі завдання двох параметрів через слеш, перший параметр задає радіус по горизонталі, а другий по вертикалі (еліптичні куточки).

Значення по замовчуванні CSS властивості border-radius:

0

Наслідування CSS властивості border-radius:

не наслідується

Приклад використання CSS властивості border-radius:

<style type="text/css"> .radius { background: #f0f0f0; border: 1px solid black; padding: 15px; margin-bottom: 10px; } </style> <div style="border-radius: 50px 0 0 50px;" class="radius"> border-radius: 50px 0 0 50px; </div> <div style="border-radius: 40px 10px" class="radius"> border-radius: 40px 10px; </div> <div style="border-radius: 10em/1em;" class="radius"> border-radius: 13em/3em; </div> <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius"> border-radius: 13em 0.5em/1em 0.5em; </div> <div style="border-radius: 8px;" class="radius"> border-radius: 8px; </div>

Використання CSS властивості border-radius:

До всіх елементів, за винятком таблиць з border-collapse: collapse

Додаткові відомості про CSS властивість border-radius:

Firefox використовує нестандартну властивість-moz-border-radius. Safari використовує нестандартну властивість-webkit-border-radius, браузер Chrome також його розуміє.