Подберите скругление углов и скопируйте свойство border-radius.
border-radius: 16px 16px 16px 16px;Свойство border-radius скругляет углы элемента. Можно задать одинаковый радиус для всех углов или разный для каждого, а также эллиптические скругления с разными радиусами по горизонтали и вертикали. Инструмент показывает форму вживую и выдаёт готовый CSS.
Небольшой радиус (6–12px) делает интерфейс мягче, радиус 50% превращает квадрат в круг (удобно для аватаров), а разные радиусы по углам создают необычные органичные формы. Подобрать нужную форму проще визуально, чем подбирая числа вслепую.
Задайте квадратному элементу border-radius: 50%. Для овала используйте 50% на прямоугольнике.
Да, border-radius принимает значения для каждого угла. Часто скругляют только верхние углы карточек или вкладок.
Это когда радиус по горизонтали и вертикали разный (через слеш). Получается вытянутое, более плавное скругление.
Линейные градиенты с предпросмотром.
CSS-тени с живым предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.
Раскладка flex с предпросмотром.