KitMul MarkKitMul Text

CSS Border Radius Generator

Design custom CSS border-radius values with a visual editor. Control each corner independently or link them together.

The CSS Border Radius Generator provides a visual way to design rounded corners for your web elements. Adjust each corner independently or link them for uniform rounding. Switch between pixel and percentage units, preview the shape in real time, and copy the generated CSS code instantly. Everything runs in your browser with zero server interaction.

Your data stays in your browser
Tutorial

How to use

1
1

Choose unit and linking mode

Select pixels or percentage units and toggle linked mode to control all corners at once or individually.

2
2

Adjust corner values

Drag the sliders for each corner to set the desired border radius and watch the preview update instantly.

3
3

Copy the CSS code

Click the Copy button to copy the generated border-radius CSS property to your clipboard for use in your project.

Guide

Complete Guide to CSS Border Radius

Border Radius Syntax

The CSS border-radius property uses shorthand notation. One value applies to all corners. Two values set top-left/bottom-right and top-right/bottom-left pairs. Three values set top-left, top-right/bottom-left, and bottom-right. Four values set each corner clockwise from top-left.

Creating Circles and Ellipses

A perfect circle requires border-radius: 50% on an element with equal width and height. For elliptical shapes, use the slash notation: border-radius: 50% / 25% creates a horizontal ellipse. This advanced syntax lets you define horizontal and vertical radii separately for creative shapes.

Rounded Corners in Design Systems

Design systems typically define a scale of border-radius tokens from none (0) to full (9999px). Common scales include sm (4px), md (8px), lg (16px), xl (24px), and full (9999px). Consistent use of these tokens ensures visual harmony across all components.

Browser Support and Fallbacks

CSS border-radius has universal browser support in all modern browsers. No vendor prefixes are required. Older browsers that lack support will simply display square corners as a graceful fallback, making it safe to use without conditional logic.

Sources

Examples

Worked Examples

Example: Rounded Card with 12px Corners

Goal: Apply uniform 12px rounded corners to a card component for a clean, modern look.

1

Step 1: Enable linked mode so all corners update together.

2

Step 2: Drag the slider to 12px.

3

Step 3: Copy the CSS: border-radius: 12px;

Result: A card with evenly rounded corners that matches common design system patterns.

Example: Asymmetric Tab Shape

Goal: Create a tab component with only the top corners rounded.

1

Step 1: Disable linked mode to control corners independently.

2

Step 2: Set top-left and top-right to 8px.

3

Step 3: Keep bottom-left and bottom-right at 0px.

4

Step 4: Copy the CSS: border-radius: 8px 8px 0px 0px;

Result: A tab-shaped element with rounded top corners and sharp bottom edges.

Use Cases

Use cases

Pill-Shaped Buttons and Tags

“Pill-shaped UI elements are created by setting border-radius to half the element's height, usually 9999px or 50%. This technique is widely used for tags, badges, and call-to-action buttons that need to stand out with a smooth, organic shape.”

Rounded Card Containers

“Card-based layouts use consistent border-radius values to create a cohesive visual rhythm. Typical values range from 8px to 16px, giving cards a friendly appearance while maintaining enough structure to contain content cleanly and professionally.”

Organic Blob Shapes for Backgrounds

“Asymmetric border-radius values on all four corners create organic blob shapes used as decorative background elements. By using very different values per corner, designers produce unique flowing shapes without needing SVG or complex clip-path rules.”

Frequently Asked Questions

?What is CSS border-radius?

CSS border-radius rounds the corners of an element's outer border edge. You can set one value for all corners or specify each corner individually.

?What is the difference between px and % units?

Pixel values set a fixed radius size regardless of element dimensions. Percentage values are relative to the element's size, making 50% always produce a circle on square elements.

?Can I set different values for each corner?

Yes, CSS border-radius accepts up to four values in the order: top-left, top-right, bottom-right, bottom-left. This tool lets you unlink corners for independent control.

?Is this border radius generator free?

Yes, this tool is completely free with no registration, no limits, and no premium features locked behind a paywall. Use it unlimited times.

?Is my data private and secure?

Absolutely. This tool runs entirely in your browser. No data is transmitted to any server. Your designs stay completely private on your device.

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

Set border-radius to 50% on a square element. The element must have equal width and height for the result to be a perfect circle.

Related Tools

CSS Box Shadow Generator

Generate CSS box-shadow with visual editor

Try Tool

CSS Gradient Generator

Create linear, radial, and conic CSS gradients

Try Tool

AI Prompt Generator

Create detailed prompts for AI image generators like Midjourney and Stable Diffusion.

Try Tool
Recommended Reading

Recommended Books on CSS & Responsive Design

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

Ben Frain

Modern CSS and Responsive Web Design

Modern CSS and Responsive Web Design

Elian Novar

CSS by Building: 250 Hands-On Exercises

CSS by Building: 250 Hands-On Exercises

Laurence Lars Svekis

As an Amazon Associate we earn from qualifying purchases.

Boost Your Capabilities

Recommended Products for Web Designers

ASUS ProArt Display 27-Inch 4K HDR Professional Monitor for Pixel-Perfect Design Work

ASUS ProArt Display 27-Inch 4K HDR Professional Monitor for Pixel-Perfect Design Work

ASUS

Wacom Intuos Small Bluetooth Graphics Drawing Tablet for Designers and Creators

Wacom Intuos Small Bluetooth Graphics Drawing Tablet for Designers and Creators

Wacom

Logitech Lift Vertical Ergonomic Wireless Mouse for Comfortable Design Sessions

Logitech Lift Vertical Ergonomic Wireless Mouse for Comfortable Design Sessions

Logitech

As an Amazon Associate we earn from qualifying purchases.

How do you like this tool?

Newsletter

Get Free Productivity Tips & New Tools First

Join makers and developers who care about privacy. Every issue: new tool drops, productivity hacks, and insider updates — no spam, ever.

Priority access to new tools
Unsubscribe anytime, no questions asked