Presets:
Top Left
8px
Top Right
8px
Bottom Left
8px
Bottom Right
8px
CSS Output
What This Tool Does
Control all four corners of a border-radius independently with range sliders. Link all corners together for uniform rounding, or unlock to set each corner individually. Seven presets cover the most common shapes: none, rounded, pill, circle, squircle, top-only, and leaf.
Frequently Asked Questions
What does border-radius do?
border-radius rounds the corners of an element. A value of 50% on a square element creates a circle. Values can be set independently for each corner: top-left, top-right, bottom-right, bottom-left. Each corner can also have different horizontal and vertical radii using the X/Y syntax.
What is the shorthand syntax?
border-radius accepts 1-4 values: one value applies to all corners; two values apply to top-left/bottom-right and top-right/bottom-left; three values apply to top-left, top-right/bottom-left, and bottom-right; four values apply individually to each corner clockwise from top-left.
How do I make a circle?
Set border-radius to 50% on a square element (equal width and height). The tool's Circle preset does this automatically.
What is a pill/squircle shape?
A pill shape uses a very large radius (e.g. 999px) which clips to the maximum possible curve — creating stadium-shaped buttons. A squircle uses a moderate radius (typically 20-30%) which is slightly less round than a circle, popular in iOS-style icons.