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

Що таке Генератор CSS border-radius?

Генератор CSS border-radius — це безкоштовний візуальний редактор властивості CSS border-radius, створений для фронтенд-розробників і дизайнерів. За допомогою повзунків діапазону та числових полів задайте горизонтальний і вертикальний радіус кожного кута в пікселях, виберіть одиницю та увімкніть еліптичний режим, щоб отримати синтаксис зі скісною рискою для овальних кутів. Блок перегляду показує заокруглену форму в реальному часі, а компактне скорочене оголошення формується для копіювання. Виберіть пресет, такий як Заокруглений, Пігулка, Коло чи органічний Blob, у сегментованому перемикачі, щоб швидко почати, а потім точно налаштуйте будь-який кут. Використовуйте його для створення мʼяких карток, кнопок-пігулок, ідеальних кіл, сквірклів і краплеподібних декоративних фігур, не запамʼятовуючи порядок кутів.

Як користуватися Генератор CSS border-radius

1. Виберіть пресет (Заокруглений, Пігулка, Коло чи Blob) у сегментованому перемикачі, щоб завантажити початкову форму.
2. Перетягніть повзунок діапазону кожного кута або введіть число, щоб задати горизонтальний радіус цього кута.
3. Увімкніть Еліптичний, щоб відкрити другий вертикальний радіус для кожного кута й отримати овальні кути із синтаксисом зі скісною рискою.
4. Виберіть одиницю (px або %) у налаштуваннях; відсотки масштабують радіус разом із розміром блока.
5. Спостерігайте за оновленням живого перегляду, потім скопіюйте сформований скорочений border-radius у свою таблицю стилів.

Приклади

Усі чотири кути 16, еліптичний вимкнено

border-radius: 16px;

Пресет Пігулка, усі кути 9999

border-radius: 9999px;

ВЛ 40/20, ВП 10, НП 40/20, НЛ 10, еліптичний увімкнено

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Поширені запитання

У якому порядку йдуть чотири кути?

Скорочений запис перелічує кути за годинниковою стрілкою, починаючи з верхнього лівого: верхній лівий, верхній правий, нижній правий, нижній лівий. Цей інструмент завжди виводить усі чотири значення в цьому порядку, тож результат однозначний і його легко поправити вручну згодом.

Що робить еліптичний режим?

Border-radius може приймати горизонтальний і вертикальний радіус для кожного кута, розділені скісною рискою, щоб малювати овальні (еліптичні) кути замість круглих. Увімкніть Еліптичний, щоб задати другий вертикальний радіус для кожного кута; вивід тоді використовує синтаксис зі скісною рискою 'горизонтальний / вертикальний'.

Що використовувати — px чи відсотки?

Пікселі дають фіксований розмір кута незалежно від блока. Відсотки задаються відносно ширини та висоти блока, тож 50% на кожному куті перетворюють квадрат на ідеальне коло, а заокруглення масштабується зі зміною розміру елемента. Одиницю можна змінити в налаштуваннях.

Як зробити ідеальне коло чи пігулку?

Виберіть пресет Коло (50% на кожному куті), щоб отримати коло з квадрата, або пресет Пігулка (дуже великий радіус у пікселях), щоб короткі сторони стали повними півколами. Можна також почати з пресета й точно налаштувати окремі кути.

Чи завантажуються мої дані кудись?

Ні. Генератор повністю працює у вашому браузері на JavaScript — значення радіусів ніколи не надсилаються на сервер, тож він працює приватно й навіть офлайн після завантаження сторінки.