◻️

Border Radius Generator

LOCAL · Browser-Only

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 recipe

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

What is CSS border-radius?

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.

What is the eight-value syntax?

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.

What units can I use?

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.

How do I round only the top corners?

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.

How do I make a perfect circle?

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

🔘

Button generator css

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

SHD

Shadow generator

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

📈

Css cubic bezier

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

🪟

Glassmorphism Generator

Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency

GRD

Gradient maker

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

▦

Css grid template

Free online CSS grid generator - visual CSS grid layout builder with live preview and code export

🎛️

Soft ui generator

Free online neumorphism generator - generate soft UI neumorphic CSS styles

🎬

Css keyframes generator

Free online CSS animation generator - generate CSS keyframe animations visually

Keep reading: CSS Units Cheat Sheet and .gitignore templates reference. Doing this in code instead? See the utility endpoints.

◻️