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