Design

◻️

Border Radius Generator

Generate CSS border-radius values with a visual editor

Presets

Preview

Border

Shape#6366f1

Background#1a1a2e

Size220px

Corner Radii

Top Leftpx

Top Rightpx

Bottom Rightpx

Bottom Leftpx

Generated CSS

border-radius: 20px;

Full Element CSS

width: 220px;
height: 220px;
background-color: #6366f1;
border-radius: 20px;

Corner Values

20px

Share to Community

Was this tool helpful?

What is Border Radius Generator?

Free online border radius generator to design CSS border-radius values visually.

Drag corner handles to set rounded corners for each corner (top-left, top-right, bottom-right, bottom-left), toggle between uniform and per-corner control, and copy the CSS code. Round the corners of a button, card, image, or container, build organic blob shapes with the eight-value syntax, or turn a square into a circle with a 50 percent radius. The preview updates in real time and everything runs in your browser, so nothing is uploaded. No signup required.

How to Use Border Radius Generator

1Drag corner handles to adjust individual border-radius values
2Toggle between uniform and per-corner control
3Preview the shape in real time
4Copy the CSS border-radius code

Frequently Asked Questions

The border-radius CSS property rounds the corners of an element's outer border edge. You can set all corners equally or each corner independently to create various shapes.

CSS border-radius supports up to eight values: four for horizontal radii and four for vertical radii, separated by '/'. This creates elliptical corners instead of circular ones, allowing complex organic shapes.

Pixels (px) and percentages (%). Percentages are relative to the element's dimensions - 50% creates a circle from a square element. The generator lets you use both.

Switch to per-corner control and set the top-left and top-right values while leaving the bottom corners at zero. The generator outputs the four-value shorthand, which lists corners clockwise starting from top-left, so you can round any subset of corners.

Use a square element and set border-radius to 50 percent on all corners. Because percentages are relative to the element size, 50 percent collapses the corners into a full circle. For a pill-shaped button, set a large percentage on a wide rectangle instead.

Share this tool

Related Tools

✂️

CSS Clip Path Generator

Free online CSS clip path generator - create custom CSS clip-path shapes visually

🔘

CSS Button Generator

Free online CSS button generator - generate styled CSS buttons with hover effects

SHD

CSS Box Shadow Generator

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

📈

Cubic Bezier Generator

Free online cubic bezier generator - create custom CSS easing curves for transitions

CSS

AI CSS Generator

Free online AI CSS generator - browse 25+ CSS effects or generate custom styles with AI

GRD

CSS Gradient Generator

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

What is Border Radius Generator?

Free online border radius generator to design CSS border-radius values visually.

Frequently Asked Questions

The border-radius CSS property rounds the corners of an element's outer border edge. You can set all corners equally or each corner independently to create various shapes.

Pixels (px) and percentages (%). Percentages are relative to the element's dimensions - 50% creates a circle from a square element. The generator lets you use both.