What units does border-radius accept?

Any CSS length unit: px, em, rem, %, vw, vh. Pixels give you fixed rounding. Percentages scale with the element's dimensions. A border-radius: 50% on a square element produces a perfect circle. On a rectangle, it produces an ellipse.

What is the difference between the simple and advanced border-radius syntax?

The simple syntax applies one radius per corner, creating circular curves. The advanced syntax separates horizontal and vertical radii with a /, allowing elliptical curves. border-radius: 20px is a circle arc. border-radius: 20px / 40px is an ellipse arc, taller than it is wide.

How do I make a perfect circle with border-radius?

Set border-radius: 50% on an element with equal width and height. If the element is not square, 50% produces an ellipse instead. To force a circle on a non-square element, use a fixed pixel value equal to half the smaller dimension. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

Does border-radius affect the click area of an element?

Yes, partially. In most browsers, pointer events respect the border-radius clip. Clicks in the clipped-off corner areas do not register on the element. However, this behavior can vary with overflow: visible and with certain SVG or canvas elements. Test interactive elements with extreme rounding.

Can I animate border-radius?

Yes. border-radius is animatable with CSS transitions and keyframe animations. This is how many loading spinners and morphing shape animations work. The tool does not generate animation code, but the values it produces work directly in @keyframes rules.

Does border-radius work on images?

Yes, but only when the image is rendered as a CSS box. For elements, apply border-radius directly and add overflow: hidden if the image corners bleed. For background images, the rounding applies to the container element and clips the background.

Border Radius Visualizer

This tool lets you set CSS border-radius values by dragging corner handles on a live preview shape. Adjust each corner independently or all at once, switch between simple and advanced (eight-value) syntax, and copy the generated CSS into your project. Everything runs in your browser. No server, no signup, no data leaves your machine.

How this tool works

The CSS border-radius property defines the curvature of an element's corners. In its simplest form, a single value like border-radius: 12px applies the same rounding to all four corners. In its advanced form, each corner gets two values: a horizontal radius and a vertical radius, separated by a / in the shorthand. This produces elliptical corners rather than circular ones. Where h is the horizontal radius and v is the vertical radius for each corner. When both values are equal, the corner is a q

Worked example

A card uses 8px on every corner, which outputs border-radius: 8px and maps to Tailwind rounded-lg. A pill button uses 9999px on a wide rectangle so the ends form semicircles.

Frequently asked questions

What units does border-radius accept?
Any CSS length unit: px, em, rem, %, vw, vh. Pixels give you fixed rounding. Percentages scale with the element's dimensions. A border-radius: 50% on a square element produces a perfect circle. On a rectangle, it produces an ellipse.
What is the difference between the simple and advanced border-radius syntax?
The simple syntax applies one radius per corner, creating circular curves. The advanced syntax separates horizontal and vertical radii with a /, allowing elliptical curves. border-radius: 20px is a circle arc. border-radius: 20px / 40px is an ellipse arc, taller than it is wide.
How do I make a perfect circle with border-radius?
Set border-radius: 50% on an element with equal width and height. If the element is not square, 50% produces an ellipse instead. To force a circle on a non-square element, use a fixed pixel value equal to half the smaller dimension. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
Does border-radius affect the click area of an element?
Yes, partially. In most browsers, pointer events respect the border-radius clip. Clicks in the clipped-off corner areas do not register on the element. However, this behavior can vary with overflow: visible and with certain SVG or canvas elements. Test interactive elements with extreme rounding.
Can I animate border-radius?
Yes. border-radius is animatable with CSS transitions and keyframe animations. This is how many loading spinners and morphing shape animations work. The tool does not generate animation code, but the values it produces work directly in @keyframes rules.
Does border-radius work on images?
Yes, but only when the image is rendered as a CSS box. For <img> elements, apply border-radius directly and add overflow: hidden if the image corners bleed. For background images, the rounding applies to the container element and clips the background.