CSS Border Radius Generator
Create rounded corners with independent control over each corner. Live preview and copy-ready CSS. Free online tool, no signup.
Preparing private browser tool…
Frequently asked questions
- Can I use percentages instead of pixels?
- Yes. Percentages are relative to the element’s size. 50% turns any square into a circle. Pixels give consistent corner sizes regardless of element size.
- How does the 4-value shorthand work?
- border-radius: top-left top-right bottom-right bottom-left. Going clockwise from the top-left corner. The tool emits the shortest valid form (1 or 4 values).
- Can I get an oval (elliptical) corner?
- Yes, with the slash syntax: border-radius: 50px / 25px gives a horizontally-elliptical corner. This tool generates only circular corners.
- Why does my image overflow the rounded corners?
- Add overflow: hidden to the parent. border-radius clips the parent box but child elements that overflow visually escape the clip without it.
- What does the link toggle do?
- It ties the four corner sliders together, so moving one sets all four. Turn it off to shape each corner on its own.
- What does the generated value look like?
- A single value such as border-radius: 16px; when all four corners match, and the four-value shorthand otherwise. Each corner can go from 0 to 200 px.