Ключові моменти
- 01Три режими — рівномірний, для окремих кутів і еліптичний — охоплюють усе від простих закруглених кнопок до органічних форм blob.
- 02Підтримує px, % і rem одиниці, кожна з різною поведінкою масштабування.
- 03Еліптичний режим відкриває горизонтальні й вертикальні радіуси для кожного кута для повного синтаксису CSS border-radius.
- 04Живий перегляд використовує реальну властивість CSS, тому те, що ви бачите, — це саме те, що рендеризуватиме ваш браузер.
Від простих заокруглених кутів до органічних форм blob
Чотирьохкутне значення border-radius легко вводити на пам'ять — border-radius: 8px. Але як тільки вам потрібні різні радіуси для кожного кута або ви хочете синтаксис еліптичного CSS для органічних форм, скорочення стає шифром дуже швидко. Повна форма — top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — вісім значень у конкретному порядку.
Генератор border-radius Handytool дозволяє вам перетягувати повзунки для кожного кута в будь-якому режимі й бачити оновлення форми в реальному часі. Перемикайтеся між px, % і rem без пересчету й копіюйте правильне скорочення або довгу форму CSS декларації, коли ви закінчите.
Як спроектувати Border Radius
- 01
Виберіть режим
Рівномірний режим застосовує один радіус до всіх чотирьох кутів. Режим для окремих кутів керує кожним кутом незалежно. Еліптичний режим додає окремий горизонтальний й вертикальний радіус для кожного кута.
- 02
Виберіть одиницю
Виберіть px для абсолютних розмірів, % для значень, які масштабуються з розмірами елемента, або rem для розмірів, пов'язаних з розміром шрифту кореня.
- 03
Перетягуйте повзунки
Регулюйте значення радіуса й спостерігайте за оновленням елемента перегляду в реальному часі. Для режиму для окремих кутів перетягуйте повзунок кожного кута незалежно.
- 04
Переглядайте форму
Поле перегляду застосовує реальну властивість CSS border-radius, тому форма, яку ви бачите, — це форма, яку рендеризуватиме ваш браузер.
- 05
Копіюйте CSS
Клацніть Копіювати, щоб отримати декларацію border-radius і вставте її у свою таблицю стилів.
Звичайні форми і коли використовувати кожен режим
- 01Кнопка таблетки: рівномірний режим %, встановити на 50% — завжди повна таблетка незалежно від ширини кнопки
- 02Карта з тонким скругленням: рівномірний режим px, 8–16px — найпоширеніший UI паттерн
- 03Асиметричний тег або ярлик: режим для окремих кутів, гострий з одного боку, закруглений з іншого
- 04Аватар-коло: рівномірний режим %, 50% — масштабується з контейнером зображення
- 05Органічна форма blob: еліптичний режим з різними значеннями X/Y для кожного кута
Миттєвий перегляд, нічого не завантажується
Генератор border-radius повністю на стороні клієнта. Повзунки, перемикання режимів і зміни одиниць миттєво оновлюють перегляд без звернення до сервера. Немає облікового запису й обмеження за швидкістю.
Інструмент працює у всіх сучасних браузерах. Властивість border-radius — включаючи еліптичний синтаксис X/Y — підтримується у кожній версії Safari, Firefox, Edge і Chrome, тому вивід безпечно використовувати без префіксів постачальника або резервних варіантів.
FAQ генератора Border-Radius
Яка різниця між px і % для border-radius?
Радіуси у пікселях абсолютні — 16px завжди 16px. Радіуси у відсотках відносяться до розмірів елемента, тому 50% створює ідеальне коло на квадратному прямокутнику й еліпс на прямокутнику.
Коли слід використовувати еліптичний режим?
Використовуйте еліптичний режим, коли вам потрібен кут, який більше вибухає на одній осі — для горизонтальної таблетки, форми листка або органічної blob. CSS виражає це як X-radii / Y-radii у скороченні border-radius.
Чому мій радіус у відсотках виглядає неправильно на неквадратному прямокутнику?
Горизонтальні відсотки відносяться до ширини елемента; вертикальні — до його висоти. На широкому, короткому елементі кути розтягуються в еліпси замість дугових.
Чи працює вивід у кожному браузері?
Так — border-radius включаючи еліптичний синтаксис підтримується у кожному сучасному браузері: всі версії Safari, Firefox, Edge і Chrome. Префікси постачальника не потрібні.
Як створити ідеальне коло за допомогою border-radius?
Встановіть усі кути на 50% у режимі відсотків на квадратному елементі. Елемент також потребує рівної ширини й висоти — використовуйте aspect-ratio: 1 / 1, якщо розмір динамічний.