Результати надаються виключно в інформаційних цілях і можуть містити помилки. Перевіряйте важливу інформацію самостійно. Використання цього інструмента здійснюється на ваш власний ризик.
Що робить цей інструмент
Генератор border-radius дає змогу заокруглити кожен кут блока окремо за допомогою чотирьох повзунків, від 0 до 100 пікселів, і одразу бачити форму в живому попередньому перегляді. На виході — одне оголошення border-radius, яке можна вставити у свою таблицю стилів. Спочатку всі чотири кути мають 20px.
Значення записуються в порядку, якого очікує CSS: верхній лівий, верхній правий, нижній правий, нижній лівий — за годинниковою стрілкою від верхнього лівого кута. Однакові значення дають рівномірно заокруглену картку; різні — бульбашки повідомлень, вкладки, форму листка та інші асиметричні елементи. Скорочений запис працює в усіх сучасних браузерах без префіксів.
Коли використовувати
- Стилізація карток, кнопок і полів введення під радіус кутів дизайн-системи.
- Заокруглення лише верхніх кутів вкладки або нижніх кутів випадного списку.
- Створення форми бульбашки чату з одним гострим кутом.
- Швидке випробування різних радіусів замість редагування CSS і перезавантаження сторінки.
Приклад
Введення
Верх-ліво 24, верх-право 24, низ-право 4, низ-ліво 24Виведення
border-radius: 24px 24px 4px 24px;Запитання про цей інструмент
Як зробити ідеальне коло?
Задайте квадратному елементу border-radius: 50%. Відсотки обчислюються від розміру елемента, тож він лишається круглим за будь-якої ширини. Для кнопки-«пігулки» натомість використовують велике значення в пікселях, наприклад 999px.
Чому фон вилазить за заокруглені кути?
Дочірні елементи з власним фоном можуть зафарбовувати кути. Додайте overflow: hidden заокругленому батьківському елементу або задайте дочірньому той самий радіус.
Чи може кут бути еліптичним?
Так. CSS приймає два радіуси на кут, розділені скісною рискою, наприклад border-radius: 50px / 25px. Генератор записує поширену колову форму; щоб додати друге значення, відредагуйте результат.
Чи впливає border-radius і на тінь?
Так. box-shadow повторює заокруглений контур, тож кути збігаються. Створіть тінь за допомогою генератора тіней CSS і поєднайте обидва оголошення.
Цей інструмент безкоштовний?
Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.
Як отримати результат?
Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.