Заокруглення кутів блоку в CSS

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

Заокруглення кутів блоку в CSS

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

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

Чим більше значення border-radius, тим сильніше будуть заокруглені кути елемента. На практиці значення часто підбирають візуально, залежно від потрібного дизайну.

<div id="elem"></div>

#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px;
}

❗ Важливо:

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

0px — без заокруглення
10px — невелике заокруглення
50% — створення круглого елемента, якщо ширина та висота однакові

📌 Завдання:

№1. Створіть блок розміром 300px на 100px та додайте йому заокруглення 10px.
№2. Змініть значення border-radius на 20px та порівняйте результат.
№3. Спробуйте створити круглий елемент за допомогою border-radius: 50%.

💡 Показати підказку

Експериментуйте зі значеннями border-radius: 5px, 15px, 30px та 50%.

✅ Показати відповідь

#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px;
}