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