Три значення заокруглення для різних кутів CSS

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

Три значення заокруглення для різних кутів CSS

Властивість border-radius може приймати три значення. У такому випадку кожне значення задає заокруглення для певних кутів елемента.

Перше значення задає заокруглення для верхнього лівого кута, друге — одночасно для верхнього правого та нижнього лівого кутів, третє — для нижнього правого кута.

<div id="elem"></div>

#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px 20px 30px;
}

1 значення — всі кути мають однакове заокруглення.
2 значення — кути заокруглюються по діагоналі.
3 значення — окремо задається верхній лівий, пара кутів та нижній правий.

❗ Важливо:

При трьох значеннях друге значення використовується одразу для двох кутів.

📌 Завдання:

№1. Створіть блок із трьома різними значеннями border-radius.
№2. Змініть значення 10px 20px 30px та подивіться, як змінюється форма.
№3. Створіть власну комбінацію заокруглень для блоку.

💡 Показати підказку

Порядок значень: верхній лівий → верхній правий і нижній лівий → нижній правий.

✅ Показати відповідь

#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px 20px 30px;
}