Border Radius Generator — independent corners

Drag each corner's slider to shape your element. Switch between pixels and percent for any aspect ratio. The CSS rule is generated live.

What is border-radius?

border-radius rounds the corners of an element's outer border edge. You can set a single value for all four corners or four separate values, each in pixels (absolute) or percent (relative to the box's dimensions).

Pixel values keep the same look at any size. Percent values scale with the box — a 50% radius on a square produces a circle, on a wide rectangle a pill shape. The trick to organic 'squircle' shapes is to mix per-corner values; CSS also supports elliptical radii (different horizontal vs vertical) for advanced effects.

How to use this tool

Pick your unit (px or %). Use percent for shapes that should scale with the element, pixels for a fixed look.
Drag each corner slider individually, or tick 'Link all corners' to keep them in sync. Resize the preview box to see how the shape responds.
Copy the generated CSS rule and paste it into your stylesheet. The shorthand collapses to a single value when all four corners are equal.

Frequently asked questions

What's the difference between px and % units?

px is absolute — 12px stays 12px regardless of the box size. % is relative — 50% means half the box's width or height. Use percent when you want the same proportional roundness across different element sizes.

How do I make a perfect circle?

Set border-radius: 50% on a square element. If the element is rectangular, the result is an ellipse instead. For a circle that scales, force a 1:1 aspect ratio with aspect-ratio: 1 / 1.

What's a 'pill' shape?

A pill is a rectangle with fully rounded short ends. Set border-radius: 9999px (or any value larger than half the height) on a rectangle taller than it is wide and the corners cap themselves at the maximum.

Can I have different radius per corner direction?

Yes — CSS supports elliptical radii using a slash (e.g. 20px / 40px gives a 20px horizontal, 40px vertical curve). This tool stays with circular radii to keep the UI manageable; for elliptical, hand-edit the CSS afterwards.

Why does my big radius look smaller than expected?

When two adjacent corner radii would overlap (their sum exceeds the box's dimension), the browser scales them down proportionally. That cap kicks in at exactly the 'pill' point and is what makes large radii look the same as 9999px on small boxes.

Common use cases

When custom border-radius beats the default 'rounded everything'.

Pill-shaped buttons

border-radius: 9999px gives the rounded-end button shape that's been default for tag/chip components since iOS popularised it. Cheap, consistent across browsers.

Speech bubbles and tooltips

A tooltip with three rounded corners and one sharp corner pointing at its target reads as 'comes from there' without needing a separate arrow element.

Asymmetric cards

Heavily rounding only the top-right and bottom-left corners gives a card a dynamic, off-axis feel — popular in landing-page hero sections.

Avatar masks

border-radius: 50% on an image element produces a circular avatar without needing SVG clipping. Works with any aspect ratio image (centred via object-fit: cover).

Tips and shortcuts

Habits that keep rounded shapes looking deliberate.

Match radius to box scale

A 4px radius on a 600px hero looks almost square. A 16px radius on a 32px button looks like a circle. Pick the radius after the element's size, not before.

Use rems, not pixels, for consistency

Switch px for rem so the corner roundness scales with your root font size. Helps maintain visual consistency across responsive layouts.

Mind the overflow

Children of a rounded-corner element with overflow: visible (the default) will spill out past the rounded edge. Add overflow: hidden to clip them properly.

Subtle wins on most UIs

4-12px radius on cards and inputs reads as modern without screaming. Anything above 24px starts to look toy-like; above 50% turns elements into shapes. Use the latter sparingly.