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

Заокруглення фону в CSS

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

Заокруглення фону в CSS

Властивість border-radius заокруглює не тільки кути межі елемента, а й сам фон блоку.

Якщо елемент має background-color, то заокруглення буде застосоване і до області фону.

<div id="elem"></div>
#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}
❗ Важливо:

Для заокруглення кольорового блоку не обов'язково додавати border. Властивість border-radius працює без межі.

  • border-radius: 0 — кути прямі
  • border-radius: 20px — заокруглені кути
  • border-radius: 50% — кругла форма для квадратного елемента
📌 Завдання:
  1. №1. Створіть блок із фоном та додайте йому заокруглення 20px.
  2. №2. Змініть колір фону та розмір заокруглення.
  3. №3. Створіть круглий елемент за допомогою border-radius: 50%.
💡 Показати підказку

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

✅ Показати відповідь
#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}