What is the difference between border-radius and clip-path?

border-radius rounds the corners of a rectangular box. clip-path can create any arbitrary shape by clipping the element to a polygon, circle or SVG path. For simple rounded rectangles, border-radius is the right choice.

Can I use different horizontal and vertical radii?

Yes. The syntax border-radius: 50px / 20px sets horizontal radii of 50px and vertical radii of 20px, creating an elliptical curve. This tool generates standard equal-axis radii.

Is my data uploaded to a server?

No. Everything runs locally in your browser using JavaScript. Your data never leaves your device.

How do I make a perfect circle?

Apply border-radius: 50% to a square element (equal width and height). The 50% means half of each dimension, which creates a circle.

🔲

Border Radius Generator

Generate CSS border-radius values visually for any rounded shape. Control each corner independently. Live preview and instant CSS output. Free, browser-based.

🎨 Design & Color Tools Free Browser-based

Tool

Link all corners

CSS border-radius Syntax

The border-radius property accepts 1–4 values for the corners in order: top-left, top-right, bottom-right, bottom-left. When all four corners are equal, a single value is used. The shorthand border-radius: 12px sets all four corners equally.

Value Reference

Value	Result
0	Sharp square corners
8px	Slightly rounded (cards)
12–16px	Modern rounded (modals, buttons)
50%	Fully round (circles, avatars)
9999px	Pill shape (tags, badges)

Border Radius Generator

CSS border-radius Syntax

Value Reference

Frequently Asked Questions