Генератор CSS-кола — border-radius 50%
Проєктуйте CSS border-radius наочно: чотири незалежні повзунки кутів у px або відсотках, ярлик «зв'язати всі кути» для миттєвих кіл і пігулок, а також органічний режим blob із випадковими формами.
Результат
Ця сторінка відкриває генератор border-radius із усіма чотирма кутами зв'язаними й виставленими на 50% — значення, яке перетворює блок на коло, використовуючи лише CSS. Чесно кажучи: на квадратному блоці це дає ідеальне коло, але на прямокутному ті самі 50% натомість дають еліпс, схожий на стадіон, адже кожен кут заокруглює лише свою чверть.
Ця різниця важлива, бо border-radius 50% — найпоширеніший спосіб зробити кругові аватари, значки іконок і статус-крапки в CSS — значно простіший за обрізання кола маскою чи малювання його в SVG, і він лишається чітким за будь-якого розміру, адже це відносний відсоток, а не фіксований піксельний радіус.
Задайте блоку фіксований квадратний розмір у власному CSS, щоб закріпити ідеальне коло, або навмисно лишіть його прямокутним для форми, схожої на пігулку — у будь-якому разі кути тут лишаються зв'язаними, тож один повзунок тримає всі чотири синхронними, поки ви копіюєте отриманий CSS.