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.