Урок 103 із 239
43%
← Назад

Створення кола в CSS

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

Створення кола в CSS

Якщо значення border-radius дорівнює половині ширини та висоти елемента, можна створити круг.

Для створення ідеального кола ширина та висота елемента повинні бути однаковими.

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

Замість border-radius: 50px можна використовувати border-radius: 50%. Це зручніше, якщо розмір елемента може змінюватися.

#elem {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid red;
}
  • Однакова ширина та висота створюють квадрат.
  • border-radius: 50% перетворює квадрат на коло.
  • Якщо ширина та висота різні, вийде овал.
📌 Завдання:
  1. №1. Створіть квадратний блок та перетворіть його на коло.
  2. №2. Змініть розмір кола з 100px на 200px.
  3. №3. Створіть овал, змінивши тільки висоту або ширину елемента.
💡 Показати підказку

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

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