Генератор Border Radius
Генератор CSS border-radius задає заокруглення кожного кута елемента у відсотках окремими повзунками або одним повзунком «Усі кути», пропонує шаблони на кшталт кола, листка та blob і копіює CSS.
Про цей інструмент
Генератор CSS border-radius задає заокруглення кожного кута елемента у відсотках окремими повзунками або одним повзунком «Усі кути», пропонує шаблони на кшталт кола, листка та blob і копіює CSS.
Як користуватися
- Перетягуйте повзунки для кожного кута або використайте «Усі кути».
- Спробуйте шаблон, наприклад «Коло», «Листок» або «Blob».
- За потреби змініть розмір перегляду.
- Натисніть «Копіювати CSS».
Корисно знати
- border-radius приймає до чотирьох значень у порядку: верхній лівий, верхній правий, нижній правий, нижній лівий.
- border-radius: 50% на квадратному елементі робить коло.
- Радіуси у відсотках масштабуються з розміром елемента; радіуси в пікселях залишаються незмінними.
- Нерівні радіуси на протилежних кутах створюють форми листка та blob без жодного SVG.
- border-radius підтримується в усіх сучасних браузерах без префіксів.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Як зробити заокруглені кути в CSS?
Задайте border-radius, наприклад border-radius: 12px; для всіх кутів, або чотири значення для окремих кутів.
Як зробити коло за допомогою CSS?
Задайте елементу однакові ширину й висоту та border-radius: 50%.
У якому порядку йдуть чотири значення border-radius?
Верхній лівий, верхній правий, нижній правий, нижній лівий — за годинниковою стрілкою від верхнього лівого кута.
Що використовувати для border-radius: px чи %?
px — для однакових кутів на кнопках і картках; % — для форм на кшталт кіл і blob, які мають масштабуватися разом з елементом.