Что такое Генератор CSS border-radius?

Бесплатный онлайн-генератор CSS border-radius. Настройте радиус углов с помощью визуальных элементов управления.

Свойство CSS border-radius управляет скруглением углов элементов, и его возможности выходят далеко за пределы простых скруглённых прямоугольников. Регулируя каждый угол независимо, вы можете создавать капсулы, круги, асимметричные формы и сложные органические очертания — всё с помощью одного CSS-свойства. CSS Border Radius Generator предоставляет отдельный ползунок для каждого из четырёх углов с предпросмотром в реальном времени, обновляющимся мгновенно.

Каждый угол — верхний левый, верхний правый, нижний правый, нижний левый — имеет собственный ползунок, позволяя создавать полностью асимметричные формы. Переключатель единиц между пикселями (px) и процентами (%) существенно меняет поведение. Пиксельные значения создают углы с фиксированным радиусом, который не меняется при изменении размеров элемента. Процентные значения привязывают радиус к размеру элемента — именно так создаются идеальные круги (border-radius: 50% на квадрате).

Четыре пресета охватывают самые распространённые сценарии. Circle создаёт border-radius: 50% для идеального круга (или эллипса на неквадратных элементах). Pill создаёт форму с полностью скруглёнными концами (border-radius: 9999px), полезную для бейджей кнопок и тегов. Card применяет аккуратное скругление 8px, подходящее для карточек и контейнеров. Rounded применяет скругление 8px ко всем углам — для кнопок и полей форм.

Сгенерированный CSS-код показывает сокращённый синтаксис. Если все четыре угла имеют одинаковое значение, выводится одно значение (например, border-radius: 8px). Если углы различаются, выводится синтаксис из четырёх значений по часовой стрелке (верхний левый, верхний правый, нижний правый, нижний левый). Код готов к копированию в вашу таблицу стилей.

Примеры использования Генератор CSS border-radius

Создание скруглённой кнопки-капсулы

Ваша дизайн-система использует кнопки-капсулы высотой 24px с полностью скруглёнными концами. Выберите пресет «Pill» для border-radius: 9999px. Предпросмотр покажет форму капсулы. Скопируйте CSS и примените его к вашему компоненту кнопки. При желании мягче настроить вид, регулируйте значения углов по отдельности.

Создание асимметричной формы для hero-секции

Главному экрану лендинга нужна запоминающаяся форма: верхний левый 0px, верхний правый 40px, нижний правый 0px, нижний левый 40px. Настройте каждый ползунок угла отдельно. Предпросмотр покажет уникальную асимметричную форму. Сгенерированный CSS: border-radius: 0 40px 0 40px.

Создание круглого аватара с процентным радиусом

Аватар пользователя — квадратное изображение 64×64 пикселя. Переключите единицы на % и установите все четыре угла на 50%. Предпросмотр покажет идеальный круг. Сгенерированный CSS: border-radius: 50%, который работает на любом квадратном элементе независимо от размера.

Зачем использовать Генератор CSS border-radius?

  • Individual control for all 4 corners
  • px and % unit toggle
  • Живой preview box
  • 4 presets: Circle, Pill, Card, Rounded

Как использовать Генератор CSS border-radius — пошаговое руководство

1

Настройте sliders for each corner (top-left, top-right, bottom-right, bottom-left).

2

Включите between px and % units.

3

Preview the border radius live.

4

Скопируйте the CSS code.

Для кого Генератор CSS border-radius лучше всего подходит?

  • дизайн интерфейсов
  • button styling
  • дизайн
  • веб

Профессиональные советы для Генератор CSS border-radius

  • 1Используйте пиксельные значения для элементов фиксированного размера (кнопки, карточки), где радиус углов должен оставаться постоянным. Процентные значения — для адаптивных элементов, где радиус должен масштабироваться вместе с элементом.
  • 2Пресет «Pill» использует очень большое пиксельное значение (9999px), а не 50%, потому что 50% на прямоугольнике создаёт эллипс, а не капсулу. Большое пиксельное значение обеспечивает полностью скруглённые концы на любом прямоугольном элементе.
  • 3Для «сквиркла» (квадрата со слегка скруглёнными углами, популярного в iOS) используйте примерно 10–12% border-radius на всех углах. Это даёт более мягкий вид, чем небольшие пиксельные значения.
  • 4При использовании процентных значений радиус рассчитывается относительно ширины элемента (для левых/правых углов) и высоты (для верхних/нижних). Разные проценты на горизонтальных и вертикальных углах создают эллиптические углы.

Генератор CSS border-radius — часто задаваемые вопросы

Что такое border-radius in CSS?

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

Как to make a circle with css??

Установите border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Генератор CSS border-radius really free to use?

Yes, Генератор CSS border-radius is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Готовы использовать Генератор CSS border-radius?

Бесплатный онлайн-инструмент — работает в браузере, без регистрации. Начните прямо сейчас.

Попробовать

Вам также может понравиться

Генератор CSS-градиентов

Создавайте красивые градиентные фоны CSS. Линейные, радиальные и конические градиенты.

Попробовать

Конвертер цветов HEX в RGB

Конвертируйте между форматами цветов HEX, RGB и HSL.

Попробовать

Генератор CSS-теней

Создавайте CSS-тени с помощью визуального редактора.

Попробовать
Free Forever · No Sign-up

182 Free Tools at Your Fingertips

All free online tools for developers, designers, students, and creators. Every tool works in your browser — no sign-up, no data collection.

Browse All ToolsГенератор CSS border-radius