CSS Border Radius Generator | Corner Radius Editor

How do I set different border-radius values for each corner in CSS?

The border-radius shorthand accepts up to four values in top-left, top-right, bottom-right, bottom-left order: border-radius: 12px 8px 20px 4px;. Use this tool to drag each corner slider individually after toggling Unlinked mode, then copy the generated CSS that uses the full four-value syntax.

How do I make a circle with CSS border-radius?

Set border-radius to 50% on an element that has equal width and height. The Presets panel includes a Circle option that sets all four corners to 50%. The generated CSS is simply: border-radius: 50%; Applied to a 100x100px div, this produces a perfect circle.

What is the difference between px and % units for border-radius?

Pixel values create fixed corner curves regardless of element size, so the rounding stays constant as the box resizes. Percentage values are relative to the element’s dimensions, so 50% always forms an ellipse touching the midpoint of each side. Switch between units using the px / % toggle in the tool.

How do I use the Linked mode to change all corners at once?

When Linked is active (the default), dragging any one corner slider updates all four corners simultaneously to the same value — useful for uniform rounding like card corners. Click Linked to toggle to Unlinked mode for independent per-corner control, then back to Linked to lock them together again.

Is there a CSS border-radius limit I should know about?

When two adjacent corner radii overlap (their combined value exceeds the edge length), browsers proportionally scale both radii down to fit. For example, on a 100px-wide element, setting both left corners to 80px each will cause the browser to shrink them so they sum to exactly 100px. The tool’s slider range caps at 100 to keep generated values predictable.