CSS Border Radius Generator
Round each corner independently, including elliptical corners, and copy the CSS. Everything runs in your browser, so your input isn’t uploaded.
Loading tool…
How to use the CSS Border Radius Generator
- Choose px or percent and move the sliders. Tick Link corners to change all four together.
- Tick Separate vertical radii for elliptical corners.
- Copy the CSS.
Example
Opposite corners share a value, so the tool writes the shortest form: two values instead of four.
Top left: 8 Top right: 16 Bottom right: 8 Bottom left: 16
border-radius: 8px 16px;
About this tool
The border-radius property rounds the corners of an element. Set each corner on its own, link them together, or use separate vertical radii for elliptical shapes, and copy the shortest valid CSS.
Good to know
- The corners are ordered top-left, top-right, bottom-right, bottom-left, as in CSS.
- 50% on a square element makes a circle.
- The tool writes the shortest equivalent form, such as 8px instead of 8px 8px 8px 8px.
Related tools
- HEX, RGB & HSL Color Converter – Convert colors between HEX, RGB and HSL, with transparency.
- CSS Gradient Generator – Build linear, radial and conic gradients and copy the CSS.
- CSS Box Shadow Generator – Design layered box shadows with sliders and copy the CSS.