▣ CSS Border Radius Generator

Build CSS border-radius shapes visually with independent corner controls. Preview any shape live and copy the CSS. Free online border-radius generator for web designers.

Top Left: 20px

Top Right: 20px

Bottom Left: 20px

Bottom Right: 20px

Lock all corners

Generated CSS

How to Use

Drag the sliders

Use the four corner sliders to set individual border-radius values. Toggle "All" to change all corners at once.

See the live preview

The box updates instantly to show the exact shape your radius values create.

Copy the CSS

Click Copy CSS to copy the border-radius property to your clipboard.

Frequently Asked Questions

What is CSS border-radius? +

border-radius rounds the corners of an element. A single value rounds all corners equally. You can specify each corner individually: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

How do I make a perfect circle with CSS? +

Set border-radius: 50% on a square element (equal width and height). For example: width:100px; height:100px; border-radius:50%;

What is the shorthand order for border-radius? +

The shorthand follows clock order: top-left, top-right, bottom-right, bottom-left. So border-radius: 10px 20px 30px 40px applies 10px to top-left, 20px to top-right, 30px to bottom-right, 40px to bottom-left.

What are elliptical border radius values? +

You can create elliptical corners using the / separator: border-radius: 50px 50px 0 0 / 80px 80px 0 0 creates a semi-ellipse on top. This creates organic, pill, or teardrop shapes in CSS.

Can I use percentages for border-radius? +

Yes — percentage values are relative to the element width (horizontal) and height (vertical). border-radius: 50% makes a perfect circle on square elements and an ellipse on rectangular ones.

संपूर्ण गाइड: CSS Border Radius Generator