CSS Border Radius Generator
Design rounded corners, pills, circles and organic blob shapes visually. Adjust each corner, preview it live, and copy the border-radius CSS.
How to use the border radius generator
- Drag the slider to round all corners, or untick "Same radius" to set each corner separately.
- Tick "Elliptical corners" for organic blob shapes with different horizontal and vertical radii.
- Copy the CSS into your stylesheet.
border-radius explained
border-radius rounds the corners of an element. One value applies to all corners; four values go clockwise from top-left: top-left, top-right, bottom-right, bottom-left. A value of 50% on a square makes a circle, and a large pixel value (like 999px) on a rectangle makes a pill shape.
Each corner can also be elliptical: values before the slash set horizontal radii and values after it set vertical radii, for example border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. That syntax is how CSS "blob" shapes are made.
border-radius is supported in every modern browser. It also clips background images, and with overflow: hidden it clips child content too.
Need a different tool? Suggest it here — we read every message.
Frequently asked questions
How do I make a circle in CSS?
Give a square element border-radius: 50%.
How do I make a pill-shaped button?
Use a radius at least half the height, such as border-radius: 999px.
What does the slash mean in border-radius?
Values before the slash are horizontal radii; after it, vertical radii. Together they make elliptical corners.
Does border-radius clip images?
It clips the element's background; add overflow: hidden to clip child images.