Генератор CSS border-radius

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

Режим кутів покриває форми, до яких люди звертаються насправді: зв'яжіть усі кути в один повзунок для ідеальних кіл, пігулок і сквірклів, або розв'яжіть їх, щоб заокруглити лише верх спадного меню чи лише один бік картки. Прев'ю в шахову клітинку позаду форми, що перемикається між світлим і темним тлом, наочно показує, які саме кути зрізаються за будь-якого радіуса — той самий візуальний прийом, яким файлові інструменти цього сайту показують прозорість.

Режим blob — друга половина: восьмизначний CSS-синтаксис зі слешем дозволяє горизонтальним і вертикальним радіусам кожного кута розходитися, і саме це перетворює заокруглений прямокутник на органічний нерівний контур. Натисніть Randomize будь-коли для нової форми й скопіюйте точний CSS за нею — без SVG-експорту чи зовнішньої бібліотеки. Пресет-сторінки покривають запити, які люди справді вводять у пошук: ідеальне коло, кнопка-пігулка у формі стадіону, сквіркл у стилі iOS та готовий органічний blob.

Як і кожен інструмент на цьому сайті, він працює повністю у вашому браузері: без завантажень, без акаунта, а генератор продовжує працювати офлайн після завантаження сторінки.