CSS Border Radius Generator
Round each corner with sliders, watch the live preview, and copy the border-radius CSS.
Runs entirely in your browser. Nothing you enter is ever uploaded.
How to use this tool
Drag any of the four corner sliders to round that corner, and the live preview updates as you move. Pick a unit (pixels, percent, or rem) to match your stylesheet, and raise the slider maximum if you need larger values. Switch to Elliptical corners when you want each corner to curve differently on its horizontal and vertical axis, which is how organic shapes in CSS are made. The presets give you a one-click pill, circle, or blob to start from. When the shape looks right, press Copy CSS to grab the rule, or download it as a small .css file.
How border-radius works
The border-radius property takes up to four values that map to the corners in clockwise order, starting at the top left. Each value can be a length (like 16px) or a percentage of the box size. When you add a second set of values after a slash, the first set controls the horizontal radius of each corner and the second set controls the vertical radius, producing elliptical or asymmetric, organic shapes. A percentage of 50% on every corner of a square turns it into a perfect circle.
A real example
Say you want a button with gently rounded corners. Set all four corner sliders to 8 with the unit on pixels and you get border-radius: 8px;. Now imagine a profile avatar that should be a circle: switch the unit to percent and set every corner to 50, which gives border-radius: 50%; on a square box. For an organic blob, use elliptical mode with mismatched values such as border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;, a popular pattern for soft, hand-drawn looking shapes and clip-style decorations.
Common questions
What is the difference between uniform and elliptical corners?
Uniform mode sets one radius per corner, so each corner is a quarter-circle. Elliptical mode lets you set a separate horizontal and vertical radius for every corner using the slash syntax, which is what creates rounded corners that look stretched or the smooth organic shapes in CSS.
Should I use pixels or percentages?
Pixels give a fixed curve that stays the same no matter the element size, which is good for buttons and cards. Percentages scale with the box, so 50% always produces a circle or ellipse regardless of dimensions. Rem ties the curve to your root font size for consistent scaling.
How do I make a perfect circle?
Use a square element (equal width and height), switch the unit to percent, and set all four corners to 50. The generated rule will be border-radius: 50%;. If the element is not square you get an ellipse instead.
Can I clip shapes with border-radius?
Border-radius rounds and can effectively clip the visible box corners, and it clips overflowing child content when you pair it with overflow: hidden;. For more advanced non-rounded clip shapes such as polygons or stars, use the separate clip-path property; this tool focuses on rounded and organic shapes built from border-radius.
Does the copied CSS work in all browsers?
Yes. The plain border-radius shorthand has been supported across every modern browser for many years and needs no vendor prefixes, so you can paste the output straight into your stylesheet.