Генератор заокруглень і фігур
Налаштуйте горизонтальні та вертикальні радіуси чотирьох кутів у px або %, а потім перегляньте форму. Скопіюйте або збережіть створений CSS border-radius. Ширина, висота й колір попереднього перегляду не включаються до CSS.
Що можна робити
Налаштування заокруглення за шаблоном
Виберіть один із 8 шаблонів, зокрема заокруглені кути, капсулу й листок, і налаштуйте радіуси. Вибір шаблону замінює радіуси та одиниці вимірювання.
Задання різного заокруглення для кожного з чотирьох кутів
Вимкніть налаштування однакових радіусів, щоб окремо ввести горизонтальні й вертикальні радіуси верхнього лівого, верхнього правого, нижнього правого та нижнього лівого кутів.
Перевірка та отримання CSS
Перевірте форму та створіть CSS. Перемикайтеся між скороченим записом і окремими оголошеннями для кутів, а потім скопіюйте CSS або збережіть його у файл.
Як користуватися
Вибір шаблону й одиниць
Введіть радіуси безпосередньо або виберіть шаблон для початкового налаштування. Зміна одиниці не перетворює числа.
Порівняння заокруглень і форми
Введіть одне значення, щоб використовувати однаковий радіус. Щоб задати різні радіуси для кутів, зніміть прапорець і змініть горизонтальні та вертикальні значення.
За потреби перевірте розмір
У налаштуваннях попереднього перегляду можна змінити ширину, висоту й колір. Вони не включаються до вихідного CSS.
Створіть CSS, а потім скопіюйте або збережіть його
Натисніть «Створити CSS» і виберіть потрібний формат. Якщо зміните радіуси, одиниці чи розмір, створіть CSS знову.
Коли стане в пригоді
Формування кутів карток і кнопок
Коли потрібно створити CSS для компонентів сторінки, однаково заокругливши всі чотири кути або лише верхні.
Створення асиметричного заокругленого тла
Коли потрібно змінювати горизонтальне та вертикальне заокруглення кожного кута, щоб створити контури, схожі на листя або органічні форми.
Зв’язок радіусів, одиниць і розміру відображення
Горизонтальний і вертикальний радіуси — два напрямки одного кута
Горизонтальний радіус керує горизонтальним заокругленням, а вертикальний — вертикальним. Кут не заокруглюється, якщо будь-яке зі значень дорівнює 0. Укажіть чотири кути за годинниковою стрілкою, починаючи з верхнього лівого.
% окремо використовує ширину й висоту
Горизонтальні значення у % відносні до ширини елемента, а вертикальні — до його висоти. Навіть з однаковими числами квадрат і високий або широкий прямокутник виглядають по-різному. px задає безпосередньо довжину.
Завеликі радіуси пропорційно зменшуються
Якщо сума сусідніх радіусів перевищує довжину сторони, усі 8 радіусів відображення зменшуються на однаковий коефіцієнт. Введені значення й створений CSS не змінюються. Після створення можна перевірити радіуси попереднього перегляду в деталях.
Можливості заокруглених кутів щодо форми контуру
border-radius утворює еліптичні криві в кутах. Не можна створювати заглиблення чи довільні багатокутники. Шаблон «сквіркл» наближує форму еліптичними кутами, але не відтворює математичну криву точно.
Поширені запитання
Чи можна задати різне заокруглення для кожного кута?
Так. Зніміть прапорець «Однаковий радіус для всіх кутів», щоб окремо ввести горизонтальний і вертикальний радіуси кожного кута. Якщо позначити його знову, для всіх радіусів буде встановлено горизонтальний радіус верхнього лівого кута.
Чи перетворюються числа під час перемикання одиниць?
Ні. Числа зберігаються, змінюється лише одиниця. Якщо після перемикання з px на % залишилося значення понад 100, введіть його ще раз у діапазоні від 0 до 100.
Чи містить CSS розмір і колір попереднього перегляду?
Ні. Результат містить лише оголошення border-radius. Задайте ширину, висоту й колір тла сторінки або компонента, де використовуватимете його.
Чому в кутах відображено менше заокруглення, ніж задано радіусами?
Браузер пропорційно зменшує радіуси, щоб криві кутів не перекривалися. Коефіцієнт зменшення та значення px для кожного кута можна перевірити в розділі «Радіуси для відображення».
Введення та результати
- Радіуси
- Задайте всі 8 значень в однакових одиницях: від 0 до 100% або від 0 до 9999px. Десяткові значення також дозволені.
- Попередній перегляд
- Ширина й висота попереднього перегляду — цілі числа від 1 до 400px. Якщо ширина не вміщується, її можна прокручувати горизонтально в полі.
- Виведення
- Скорочений запис border-radius або окремі оголошення для кожного з 4 кутів. Скопіюйте або збережіть border-radius.css.
- Не включено
- Ширина, висота, колір тла та експорт зображення або SVG.