Урок 105 із 239
44%
Два значення заокруглення для різних кутів CSS
Вивчаємо, як задавати різне заокруглення кутів за допомогою двох значень властивості border-radius.
Два значення заокруглення для різних кутів CSS
Властивість border-radius може приймати два значення. У цьому випадку кожне значення буде застосоване одразу до двох кутів.
Перше значення задає заокруглення для верхнього лівого та нижнього правого кутів, а друге — для верхнього правого та нижнього лівого кутів.
<div id="elem"></div>#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px 40px;
}- Перше значення — верхній лівий + нижній правий кути.
- Друге значення — верхній правий + нижній лівий кути.
❗ Важливо:
Якщо вказати одне значення, всі кути отримають однакове заокруглення.
📌 Завдання:
- №1. Створіть блок та задайте йому два різні значення border-radius.
- №2. Змініть значення 10px 40px на інші та порівняйте результат.
- №3. Спробуйте створити власну форму елемента за допомогою двох значень.
💡 Показати підказку
Запам'ятайте правило: при двох значеннях вони застосовуються по діагоналі.
✅ Показати відповідь
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px 40px;
}