CSS Border Radius Generator

Build CSS border-radius for cards, buttons, inputs, badges, modals, avatars, and design systems.

Обработка выполняется локально в браузере. Данные не отправляются на сервер.

For this tool, processing runs locally in your browser and data is not sent to the server.

CSS border-radius is a free online tool. Генератор CSS border-radius для карточек, кнопок, input, badge, модальных окон, аватаров и дизайн-систем. Обработка выполняется локально в браузере. Данные не отправляются на сервер.

What it does

Output

Processing

Continue working

Choose a related tool for the next step.

TCharacter Counter

Open

MSEO Title Length Checker

Open

TMask Email

Open

Data passed between tools is kept only in the current browser session.

How to use

Choose the radius in px, rem, em, or percent.
Check the result on live previews for a card, button, or badge.
If needed, set each corner separately or pick a preset.
Copy border-radius, a CSS variable, inline style, or Tailwind class.
Paste the code into your CSS, component, or design system.

More about this tool

The CSS Border Radius Generator helps you quickly pick corner rounding for cards, buttons, inputs, badges, modals, avatars, and other UI elements. You can set one radius for all corners, different values per corner, choose px, rem, em, or %, use pill or circle presets, preview the result live, and copy ready-made CSS. Output is available as a CSS rule, border-radius value, CSS variable, inline style, Tailwind class, or a fragment for a design system. Generation runs locally in your browser, and your data is not sent to the UtiLab server.

Runs in the browser
Data is not sent to the server
Live rounding preview
Supports px, rem, em, and %
Per-corner controls
Presets for cards, buttons, pill, and circle
Copy CSS, variable, or Tailwind class
No registration required

Frequently Asked Questions

How do I create CSS border-radius?

Set the corner radius, check live preview, and copy the ready-made border-radius rule.

What does border-radius do?

The CSS border-radius property rounds element corners: cards, buttons, inputs, images, badges, and other UI blocks.

Can I set each corner separately?

Yes. In per-corner mode you can set different values for top-left, top-right, bottom-right, and bottom-left.

In what order are four border-radius values written?

The order is: top-left, top-right, bottom-right, bottom-left.

How do I make a circle with border-radius?

Use border-radius: 50%, but the element itself must have equal width and height.

How do I make a pill button?

For a pill or capsule shape, use border-radius: 9999px or the Tailwind class rounded-full.

Can I copy a Tailwind class?

Yes. For common values the tool may suggest rounded-lg, rounded-xl, rounded-2xl, or rounded-full. Non-standard values use rounded-[14px].

What is elliptical border-radius?

Elliptical border-radius uses two radii with a slash, for example border-radius: 24px / 12px. That lets horizontal and vertical rounding differ.

Is my data sent to the server?

No. Settings and output are generated locally in your browser and are not sent to the UtiLab server.

Do I need to register?

No. The tool works immediately without registration.

More about this tool

Runs in the browser
Data is not sent to the server
Live rounding preview
Supports px, rem, em, and %
Per-corner controls
Presets for cards, buttons, pill, and circle
Copy CSS, variable, or Tailwind class
No registration required

Frequently Asked Questions

How do I create CSS border-radius?

Set the corner radius, check live preview, and copy the ready-made border-radius rule.

What does border-radius do?

The CSS border-radius property rounds element corners: cards, buttons, inputs, images, badges, and other UI blocks.

Can I set each corner separately?

Yes. In per-corner mode you can set different values for top-left, top-right, bottom-right, and bottom-left.

In what order are four border-radius values written?

The order is: top-left, top-right, bottom-right, bottom-left.

How do I make a circle with border-radius?

Use border-radius: 50%, but the element itself must have equal width and height.

How do I make a pill button?

For a pill or capsule shape, use border-radius: 9999px or the Tailwind class rounded-full.

Can I copy a Tailwind class?

Yes. For common values the tool may suggest rounded-lg, rounded-xl, rounded-2xl, or rounded-full. Non-standard values use rounded-[14px].

What is elliptical border-radius?

Elliptical border-radius uses two radii with a slash, for example border-radius: 24px / 12px. That lets horizontal and vertical rounding differ.

Is my data sent to the server?

No. Settings and output are generated locally in your browser and are not sent to the UtiLab server.

Do I need to register?

No. The tool works immediately without registration.