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

Декларацията border-radius може да приеме до четири независими стойности за ъгли плюс допълнителен осем-стойностен slash синтаксис за органични извивки – повече подвижни части, отколкото повечето хора осъзнават, докато не се нуждаят от нещо повече от обикновена заоблена карта. Този генератор извежда всяка една от тези части на екрана: четири плъзгача за ъгли със свои собствени единици px или проценти, бутон за свързване на всички ъгли за симетрични форми и blob режим за форми, които никоя единична стойност за радиус не може да изрази.

Режимът Ъгли покрива формите, които хората реално търсят: свържете всеки ъгъл към един плъзгач за перфектни кръгове, хапчета и squircle-и или ги развържете, за да закръглите само горната част на панел за падащо меню или само едната страна на карта. Шахматна визуализация зад формата, с възможност за превключване между светъл и тъмен фон, прави очевидно точно кои ъгли се изрязват при всеки радиус – същият визуален трик, който файловите инструменти на този сайт използват, за да показват прозрачност.

Blob режимът е другата половина: осем-стойностният slash синтаксис на CSS позволява хоризонталните и вертикалните радиуси на всеки ъгъл да се различават, което превръща заоблен правоъгълник в органичен, неправилен контур. Натиснете Разбъркай по всяко време за свежа форма и копирайте точния CSS зад нея – без нужда от SVG експорт или външна библиотека. Предварително зададените страници покриват заявките, които хората реално въвеждат в полето за търсене: перфектен кръг, бутон хапче във форма на стадион, squircle в стил iOS и готов органичен blob.

Както всеки инструмент на този сайт, той работи изцяло във вашия браузър: без качване, без акаунт и генераторът продължава да работи офлайн, след като страницата се зареди.