Как пользоваться: Генератор border-radius
- Перемещайте ползунок, чтобы скруглить все четыре угла, или выберите Каждый угол, чтобы задать верхний левый, верхний правый, нижний правый и нижний левый углы отдельно.
- Выберите единицу измерения:
pxдля фиксированного скругления,%для масштабирования относительно размера элемента (50% на квадрате даёт круг). - Выберите Эллиптические или Случайный blob для органичных форм с 8 значениями.
- Скопируйте CSS — он сокращён до минимального числа значений, которое даёт ту же форму.
Как работают значения border-radius
| CSS | Углы |
|---|---|
border-radius: 12px | все четыре |
border-radius: 12px 4px | верхний левый и нижний правый, верхний правый и нижний левый |
border-radius: 12px 8px 4px 0 | верхний левый, верхний правый, нижний правый, нижний левый (по часовой стрелке) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | эллиптические: горизонтальные радиусы / вертикальные радиусы — формы blob |
Кнопки-таблетки: используйте большое значение, например 9999px — браузер ограничит его половиной высоты, поэтому концы останутся круглыми при любом размере. Круги: 50% на квадратном элементе. Проценты отсчитываются от ширины блока (горизонтальные радиусы) и высоты блока (вертикальные радиусы).
Также может пригодиться: Генератор box-shadow, Генератор CSS-градиентов, Генератор glassmorphism.
Также ищут как: css border radius, скругление углов css, css генератор blob, css закругление углов, генератор скругленных углов css.
Инструменты, которые хорошо сочетаются с Генератор border-radius
- CSS Grid генератор — Задайте колонки, строки и отступы, затем выделите ячейки, чтобы создать области вроде header, sidebar и main.
- CSS-генератор фильтров — Настройте blur, brightness, contrast, saturation, hue, grayscale, sepia, invert и drop shadow для примера или своего изображения и скопируйте CSS-свойство filter.
- Генератор Cubic Bezier — Задайте кривую easing, перетаскивая два маркера, и сравните её со стандартными easing.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
Часто задаваемые вопросы
Как сделать скругленные углы в CSS?
Используйте border-radius, например border-radius: 12px для всех углов или четыре значения для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.
Как сделать кнопку в форме таблетки?
Задайте border-radius большое значение, например 9999px. Браузер ограничит его половиной высоты, поэтому концы всегда будут идеально круглыми.
Как сделать круг?
Задайте элементу одинаковые ширину и высоту и border-radius: 50%.
Что означает косая черта в border-radius?
Значения до косой черты задают горизонтальные радиусы, а после неё — вертикальные, поэтому каждый угол становится эллипсом. Так создаются формы blob.
Можно ли установить Генератор border-radius как веб-приложение и пользоваться им офлайн?
Да. Генератор border-radius — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.