Корисний матеріал
Як заокруглити кути в CSS: border-radius для блоків і зображень
Для заокруглення кутів у сучасному CSS використовується властивість border-radius. Вона працює для блоків, кнопок, карток і зображень.
Найпростіший варіант
.card { border-radius: 12px; }Одне значення застосовується до всіх чотирьох кутів.
Коло або аватар
.avatar { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }Для квадратного елемента 50% дає коло.
Різні кути
.box { border-radius: 16px 16px 4px 4px; }Можна задавати один, два, три або чотири радіуси. Негативні значення недопустимі.