Генератор Border Radius

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

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

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

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