Border Radius Generator

Quick answer: Border Radius Generator is a free online tool that lets you design perfectly rounded corners with four live sliders — top-left, top-right, bottom-right and bottom-left — in pixels or percentages, and copy the clean CSS instantly. It works instantly with no signup or download — everything runs privately in your browser.

Design perfectly rounded corners with four live sliders — top-left, top-right, bottom-right and bottom-left — in pixels or percentages, and copy the clean CSS instantly.

What is the Border Radius Generator?

A border radius generator is a visual tool that builds the CSS border-radius property for you. Instead of guessing numbers and refreshing your page, you drag sliders for each corner and watch a live preview update in real time. The tool then outputs copy-ready CSS you can paste straight into your stylesheet.

The border-radius property accepts up to four values, one per corner, in clockwise order starting at the top-left: top-left, top-right, bottom-right, bottom-left. Values can use pixels for fixed rounding or percentages for responsive rounding that scales with the element’s size. Set all four corners to 50% and a square becomes a perfect circle; use a large pixel value on one axis to create pill-shaped buttons and chips.

Rounded corners are everywhere in modern interface design — buttons, cards, avatars, badges, inputs and modals. Getting them right by hand is tedious, especially for asymmetric designs where each corner differs. This generator handles the shorthand syntax for you, keeps the value order correct, and shows exactly what the result looks like before you commit a single line of code. Everything runs locally in your browser, so your design experiments stay private and instant.

How to use the Border Radius Generator

  1. Choose your unit: <strong>px</strong> for fixed rounding or <strong>%</strong> for rounding that scales with the element’s size.
  2. Drag the four corner sliders (top-left, top-right, bottom-right, bottom-left) and watch the live preview update instantly.
  3. Try presets in your head: equal values for uniform rounding, 50% for a circle, or one large value for pill shapes.
  4. Copy the generated <code>border-radius</code> rule from the code panel with the Copy button.
  5. Paste it into your stylesheet — it works in every modern browser with no prefixes needed.

Border Radius Generator use cases

Buttons and form inputs

Most design systems round buttons and inputs between 6px and 12px. Use the generator to match an existing design exactly, or experiment until the corners feel right, then copy one consistent value across your whole UI.

Avatars and profile images

A square image becomes a perfect circle at 50% border-radius. The percentage mode is ideal here because the circle stays perfect even when the image size changes responsively. It is the fastest way to get crisp circular avatars without image editing.

Cards and modals

Cards usually need slightly larger radii (12px to 24px) than buttons so the two shapes feel related but distinct. Preview the card shape live before touching your CSS. Slightly larger radii on containers create a clear visual hierarchy over smaller controls.

Asymmetric and playful designs

Organic blob shapes, chat bubbles and diagonal corner treatments need different values per corner. The four-slider layout makes these easy to explore without memorizing the shorthand order. Blob shapes and diagonal corners give brands a distinctive, memorable personality.

Design tokens

Teams define radius scales (sm, md, lg, pill) in their design systems. Use the generator to dial in each token value visually, then store them as CSS custom properties. Visual tuning beats guessing token values and keeps the whole system consistent.

Tips

  • The four values always run clockwise from the top-left: top-left, top-right, bottom-right, bottom-left.
  • Use percentages when the element resizes (avatars, responsive cards) and pixels when you want an exact fixed curve.
  • If inner content or images poke past the rounded corners, add <code>overflow: hidden</code> to the element.
  • Pair <code>border-radius</code> with a border or box-shadow — both follow the curve automatically.
  • Keep a small set of radius values across your site (for example 8px, 16px, 999px for pills) so the design feels cohesive.

Frequently asked questions

In what order do the four border-radius values go?
Clockwise starting from the top-left corner: top-left, top-right, bottom-right, bottom-left. This generator labels each slider, so you never have to memorize the order — the preview always shows exactly which corner is which. Once you see it visually, the clockwise pattern sticks permanently.
Should I use px or % for border-radius?
Use px when you want a fixed curve that never changes, like an 8px button radius. Use % when the rounding should scale with the element, like 50% turning any square into a perfect circle. Percentage radii are measured against the element's width and height, so they stay proportional on responsive layouts.
How do I make a perfect circle with border-radius?
Apply border-radius: 50% to a square element — equal width and height. If the element is a rectangle, 50% produces an ellipse instead. Switch this tool to % mode, set all four corners to 50, and the preview will show the result instantly.
Why does my image overflow the rounded corners?
Border-radius clips the element's own background and border, but child content like an can still paint outside the curve. Add overflow: hidden to the rounded element so everything inside gets clipped to the same shape. This applies to videos, iframes and any other child content too.
Can I round just two corners?
Yes. Set the two corners you want to 0 and give the others a value — for example, border-radius: 16px 16px 0 0 rounds only the top corners, a common pattern for card headers and tab bars. This generator makes it easy: leave two sliders at zero.
Does border-radius work in all browsers?
Yes. Border-radius is supported in every modern browser including Chrome, Firefox, Safari and Edge, with no vendor prefixes needed. The CSS this tool generates is plain, standard syntax that works everywhere. You can paste it into production stylesheets with complete confidence.
What is the difference between 999px and 50% for pill shapes?
Both create pill shapes on a rectangle. 999px is a common trick: any value larger than half the element's height maxes out the curve. 50% also works but measures against both dimensions, which can look slightly different on very wide elements. Either is fine — 999px is the more popular convention.