CSS Border Radius Generator
Build CSS border-radius visually. Per-corner control and ellipse support. Copy CSS. Free.
How to use the Border Radius
border-radius shorthand
The simplest form is one value: border-radius: 10px rounds all four corners equally. Two values are top-left/bottom-right and top-right/bottom-left. Four values go top-left, top-right, bottom-right, bottom-left (clockwise from top-left). Use 50% on a square to make a perfect circle.
Elliptical corners
Use the syntax border-radius: H / V to make corners elliptical — the value before the slash sets horizontal radius, after the slash sets vertical. For example 50px / 25px creates oval corners. Each corner can have its own ellipse for fancy organic shapes.
Frequently asked questions
How does the CSS border-radius property work?
It rounds the corners of an element. One value rounds all corners equally; up to four values set the top-left, top-right, bottom-right and bottom-left corners in order.
How do I make a perfect circle?
Give the element equal width and height and set border-radius to 50%.
What does the elliptical syntax with a slash do?
Writing horizontal and vertical radii separated by a slash, such as 50% / 25%, creates elliptical corners instead of circular ones.