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

Створення кола при заокругленні у відсотках в CSS

Вивчаємо, як створити круглий елемент за допомогою значення border-radius: 50%.

Створення кола при заокругленні у відсотках в CSS

Щоб створити ідеальне коло, можна задати властивості border-radius значення 50%.

Круг утворюється тоді, коли ширина та висота елемента однакові. У такому випадку заокруглення на 50% перетворює квадрат на коло.

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

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

  • Однакова ширина і висота + border-radius: 50% = круг.
  • Різна ширина і висота + border-radius: 50% = овал.
  • border-radius: 50% часто використовують для аватарок та круглих іконок.
📌 Завдання:
  1. №1. Створіть квадратний блок розміром 200px на 200px.
  2. №2. Додайте border-radius: 50% та отримайте круг.
  3. №3. Змініть ширину елемента та подивіться, як зміниться форма.
💡 Показати підказку

Для створення кола завжди перевіряйте, щоб ширина та висота елемента були однаковими.

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