Урок 107 із 239
45%
← Назад

Заокруглені кути у відсотках в CSS

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

Заокруглені кути у відсотках в CSS

Для властивості border-radius можна використовувати не тільки пікселі, а й відсотки.

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

<div id="elem"></div>
#elem {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  border-radius: 10%;
}
❗ Важливо:

Якщо ширина та висота елемента однакові, значення border-radius: 50% створить ідеальне коло.

#elem {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
  • 10% — невелике заокруглення кутів.
  • 50% — створення кола для квадратного елемента.
  • 100% — також може використовуватися для створення круглих форм.
📌 Завдання:
  1. №1. Створіть квадратний блок із border-radius: 10%.
  2. №2. Змініть значення на 25% та порівняйте результат.
  3. №3. Створіть круглий елемент за допомогою border-radius: 50%.
💡 Показати підказку

Для створення аватарок та круглих іконок часто використовують border-radius: 50%.

✅ Показати відповідь
#elem {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  border-radius: 10%;
}