What is the difference between border-radius in pixels and percentages?

Pixels set a fixed curve size that does not change with element dimensions. Percentages scale with the element's width and height—50% on a square creates a circle, but 50% on a rectangle creates an ellipse. Use pixels for consistent radii and percentages for responsive shapes.

Can I set a different radius for each corner?

Yes. Use four-value syntax: border-radius: 8px 16px 24px 32px (top-left, top-right, bottom-right, bottom-left). Or use longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

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

Apply border-radius: 50% to a square element (width and height must be equal). If the element is rectangular, 50% will create an ellipse. For a perfect circle on any aspect ratio, set width and height to the same value first.

What happens if my border-radius is larger than the element?

Browsers clamp border-radius to a maximum of 50% of the element's smaller dimension. A 100px box with border-radius: 200px renders as if you set border-radius: 50px. The generator auto-clamps to prevent this confusion.

Can I animate border-radius with CSS transitions?

Yes. Border-radius is a fully animatable CSS property. Use transition: border-radius 0.3s ease to smooth radius changes on hover or state change. The generator outputs CSS that works directly in transition declarations.

Do all browsers support border-radius in 2026?

Yes. Border-radius has been supported without vendor prefixes in all major browsers since 2013. No -webkit- or -moz- prefixes are needed. The syntax is identical across Chrome, Firefox, Safari, and Edge.

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 does the CSS Border Radius Generator work step by step?

CSS border-radius accepts one to four values that control corner rounding. A single value (border-radius: 8px) rounds all four corners equally. Two values set top-left/bottom-right, then top-right/bottom-left. Three values set top-left, then top-right/bottom-left, then bottom-right. Four values target each corner in clockwise order starting from top-left.

What does a typical CSS Border Radius Generator result look like?

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 is the difference between border-radius in pixels and percentages?
Pixels set a fixed curve size that does not change with element dimensions. Percentages scale with the element's width and height—50% on a square creates a circle, but 50% on a rectangle creates an ellipse. Use pixels for consistent radii and percentages for responsive shapes.
Can I set a different radius for each corner?
Yes. Use four-value syntax: border-radius: 8px 16px 24px 32px (top-left, top-right, bottom-right, bottom-left). Or use longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
How do I make a perfect circle with border-radius?
Apply border-radius: 50% to a square element (width and height must be equal). If the element is rectangular, 50% will create an ellipse. For a perfect circle on any aspect ratio, set width and height to the same value first.
What happens if my border-radius is larger than the element?
Browsers clamp border-radius to a maximum of 50% of the element's smaller dimension. A 100px box with border-radius: 200px renders as if you set border-radius: 50px. The generator auto-clamps to prevent this confusion.
Can I animate border-radius with CSS transitions?
Yes. Border-radius is a fully animatable CSS property. Use transition: border-radius 0.3s ease to smooth radius changes on hover or state change. The generator outputs CSS that works directly in transition declarations.
Do all browsers support border-radius in 2026?
Yes. Border-radius has been supported without vendor prefixes in all major browsers since 2013. No -webkit- or -moz- prefixes are needed. The syntax is identical across Chrome, Firefox, Safari, and Edge.