A pill without guessing the final radius
Capsule uses oversized pixel radii. The browser scales the overlapping corners down so the short dimension becomes smoothly rounded.
Corner radii
Shape preview
Shape
The radii fit without overlap. Horizontal percentages refer to box width; vertical percentages refer to height.
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the Border Radius Generator
- 01
Choose a rounded card, organic pebble, leaf, or capsule preset.
- 02
Select pixel or percentage units; switching units keeps the current numeric values.
- 03
Edit horizontal and vertical radii for each corner in clockwise order.
- 04
Adjust width and height, inspect the boundary guide, then copy or download CSS.
Examples
An organic shape
Organic pebble uses different horizontal and vertical percentages. Change its width while keeping its height to see how percentage radii respond to each dimension.
Read the slash notation
The four values before the slash are horizontal radii in top-left, top-right, bottom-right, bottom-left order. The four after the slash are vertical radii in the same order. Matching both axes creates circular corner arcs; differing axes produce elliptical arcs.
Understand automatic overlap scaling
Adjacent corner radii cannot overlap along a box edge. When their sums exceed the available width or height, the browser scales every radius by a common factor. The tool reports this factor for the entered dimensions. Percent horizontal radii use width, while percent vertical radii use height.
Common questions
Why do changing one corner and changing the whole shape seem linked?
If that corner makes an edge sum too large, overlap reduction scales all corners. Reduce the oversized radius or increase the corresponding box dimension.
Will border-radius clip my child content?
Border-radius rounds the box border and background. Add an appropriate overflow rule when you also need to clip descendants; that behavior is outside this export.
Is this a vector shape export?
No. The download is CSS. It creates a rounded rectangular box, not an SVG path or a freeform polygon.