CSS Border Radius Generator provides sliders for all four corners independently or linked together. Toggle between px and % units. The live preview updates the shape of a box in real time, and the CSS border-radius property is always one click away.
Set all corners to 50% and enable 'Link all corners' — the element will appear as a perfect circle if its width and height are equal, or as an ellipse if they aren't.
Use % for shapes that should remain proportionally round relative to the element's size (like circle avatars that scale). Use px for fixed-radius corners, like the standard 8px or 16px rounded corners common in card and button designs, that should stay the same regardless of element size.
Uncheck 'Link all corners' to unlock independent sliders for each of the four corners, then set only the top-left and top-right sliders while leaving the bottom two at 0.
Up to 200px, or up to 50% when using percentage units. 50% on a square element always produces a perfect circle.
When all four corner values match, the tool outputs a single shorthand value like border-radius: 16px;. When corners differ, it outputs all four values in top-left, top-right, bottom-right, bottom-left order, matching the standard CSS border-radius shorthand.
This tool controls the four standard rectangular corner radii, which can create rounded rectangles, capsules, and circles/ellipses. True organic blob shapes typically need the more complex 8-value border-radius syntax or an SVG path, which isn't generated here.
Yes. border-radius is supported in all modern browsers without vendor prefixes, for both single-value and per-corner syntax.
