CSS Border Radius Generator

What it does

Set border-radius for each corner of a box independently, with a live preview that updates as you drag. Toggle between pixel and percentage units. Pick from presets (4, 8, 12, 16, 24px, or “pill” for 50%) or fine-tune with the sliders.

The output CSS uses the shortest valid form. If all four corners are equal, you get border-radius: 12px;. If they differ, you get the four-value shorthand border-radius: top-left top-right bottom-right bottom-left;.

When px vs % matters

Pixel units are absolute. A 12px radius is the same size whether the box is 100px or 1000px wide. Predictable, useful for buttons and cards where you want consistent corner softness regardless of size.

Percentage units scale with the box. 50% gives a perfect circle (when the box is square) or a pill (when the box is rectangular). Used for circular avatars, capsule buttons, and pill-shaped tags. Setting border-radius: 50% on a square element makes it a circle.

For UI components, pixels are the default. For dynamic elements like avatars where the box size changes, percentages let one rule cover all sizes.

Asymmetric corners

The four-corner approach unlocks shapes most people don’t know CSS can do:

• Tab-style top corners: 12px 12px 0 0 rounds only the top
• Speech bubble: 16px 16px 0 16px (or 16px 16px 16px 0) suggests a tail
• Asymmetric tag: 0 12px 12px 0 for a tag attached on the left
• Card with peek: 4px 24px 4px 24px for a “lifted” feel

The Link-all-corners toggle is on by default, most use cases want symmetric corners. Turn it off to fine-tune individual corners.

Common UI conventions

Modern UI design has converged on a few standard radii:

• 0px: brutalist / sharp / serious (banks, news, government)
• 4px: subtle softness (Material 1.0, older corporate)
• 6-8px: most common for buttons and inputs (Tailwind, modern apps)
• 12-16px: cards and modals (modern SaaS, mobile-first)
• 24-32px: extra-soft, friendly, often slightly playful
• 50% (pill): capsule buttons, tags, avatars

iOS uses 8-12px on most UI. Material Design (Google) defaults to 4px on buttons and 8-16px on cards. Stripe, Linear, and most modern SaaS sit in the 8-12px range. There’s no objectively right answer; pick what matches your brand voice.

Why “border-radius” doesn’t always do what you’d expect

Two gotchas:

1. Overflow content needs overflow: hidden. Border-radius rounds the box but doesn’t clip what’s inside. If you have an image at 100% width with rounded corners, you also need overflow: hidden on the parent.

2. Border vs box-shadow on rounded corners. The corners look slightly different depending on whether you’re using border (which inherits the radius cleanly) or box-shadow with spread (which can look slightly off near very tight corners). Test in your actual context.

Frequently asked questions

Why does my percentage radius look weird? 50% creates a perfect circle on a square. On a rectangle, it creates an oval. Many designers want pill-shape but accidentally get oval, explicit pixel values give predictable shapes regardless of box dimensions.

Can I do “ellipse” radii (different x and y)? Yes, full CSS supports border-radius: 30px / 60px to specify different horizontal and vertical curvature per corner. This generator doesn’t expose that yet, for now, hand-edit the output.

What about backwards compatibility? border-radius is supported in every browser back to IE9. No prefixes needed in 2026.

Why does my output not show 4 separate values? The generator simplifies when all corners are equal. If you want explicit four-value form for clarity in a design system, copy and expand manually.