Довідники CSS3 border-radius

Що таке border-radius в CSS3?

Властивість border-radius встановлює закруглення кутів у об'єкті. В якості значення вказується відстань в пікселях, відсотках чи інших одиницях вимірювання.


  1. Якщо вказувати лише одне значення, то задається відступ для всіх кутів: правого, лівого, верхнього і нижнього (border-radius: 50px);
  2. Якщо вказувати два значення, то перше контролює верхній і нижній правий кут, а друге - лівий верхній і нижній кут (border-radius: 50px 10px);
  3. Якщо вказувати три значення, то перше контролює верхній лівий кут, друге - верхній правий і нижній лівий кут, а третє - нижній правий кут (border-radius: 50px 10px 30px);
  4. Якщо вказувати чотири значення, то перше контролює верхній лівий кут, друге - верхній правий кут, третє - нижній правий кут, а четверте - нижній лівий кут (border-radius: 50px 10px 30px 10px).


Приклад властивості:
div {
	border-radius: 50px;
	padding: 5%;
	width: 90%;
	background: #A14433;
	color: #fff;
}

Результат:


Блок з текстом і закругленими кутами
Коментарі
Додати коментар

Поки що коментарів немає