Що таке border-radius в CSS3?
Властивість border-radius встановлює закруглення кутів у об'єкті. В якості значення вказується відстань в пікселях, відсотках чи інших одиницях вимірювання.
- Якщо вказувати лише одне значення, то задається відступ для всіх кутів: правого, лівого, верхнього і нижнього (border-radius: 50px);
- Якщо вказувати два значення, то перше контролює верхній і нижній правий кут, а друге - лівий верхній і нижній кут (border-radius: 50px 10px);
- Якщо вказувати три значення, то перше контролює верхній лівий кут, друге - верхній правий і нижній лівий кут, а третє - нижній правий кут (border-radius: 50px 10px 30px);
- Якщо вказувати чотири значення, то перше контролює верхній лівий кут, друге - верхній правий кут, третє - нижній правий кут, а четверте - нижній лівий кут (border-radius: 50px 10px 30px 10px).
Приклад властивості:
div {
border-radius: 50px;
padding: 5%;
width: 90%;
background: #A14433;
color: #fff;
}Результат:
Блок з текстом і закругленими кутами
Коментарі