CSS Border-Radius Generator
Shape each corner with independent border-radius sliders and a live preview. Copy the CSS — supports % and px units.
Pure browser JavaScript — generates CSS locally.
How to use this tool
- Drag the slider for each of the four corners.
- Switch between % and px units.
- Copy the border-radius CSS shorthand.
Shape each corner with independent border-radius sliders and a live preview. Copy the CSS — supports % and px units.
How it works
The CSS Border-Radius Generator gives you independent sliders for all four corners of an element — top-left, top-right, bottom-right, and bottom-left — so you can create asymmetric rounded shapes that the standard shorthand property does not easily express.
Each corner can be set in pixels or percentages. Percentage values are relative to the element's dimensions, so 50% on all four corners always produces a perfect circle regardless of the element's actual size. Pixel values give fixed rounding regardless of size.
The live preview shows a colored box that updates as you drag the sliders. Once you are happy with the shape, copy the generated border-radius CSS and paste it into your stylesheet. The generator outputs the four-value shorthand and the full eight-value horizontal/vertical form when needed for elliptical corners.
Asymmetric border radii are popular for card decorations, badge shapes, and organic UI elements that deviate from standard pill or rectangle styles.
Worked example
Create a speech bubble shape
- Set top-left and top-right to 16px each.
- Set bottom-left to 16px.
- Set bottom-right to 0 to create a sharp corner that acts as the tail anchor.
- Copy the border-radius CSS.
- Apply it to a div and position a triangular ::after pseudo-element at the bottom-right for the tail.
A rounded rectangle with one sharp corner to serve as the base of a speech bubble.
Common mistakes to avoid
- Applying border-radius to a non-square element and expecting a circle; you need equal width and height for 50% to produce a true circle.
- Forgetting overflow: hidden when using border-radius on elements with child elements that extend to the corners — the children will overflow the rounded shape without it.
- Using very large pixel values (e.g. 9999px) as a lazy way to get pill shapes — prefer 50% or a value equal to half the element height for a proper pill.
Key terms
- border-radius
- A CSS property that rounds the corners of an element's border box; each corner can be set independently.
- Elliptical corner
- A corner whose horizontal and vertical radii differ, creating an oval arc rather than a circular arc; specified with the / separator in the eight-value form.
Frequently asked questions
- Does this produce shorthand?
- Yes — the four values map to top-left, top-right, bottom-right, bottom-left in the standard border-radius shorthand order.