border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

Free Online Border Radius Generator — CSS Visual Editor

Create custom CSS border-radius values visually. Design rounded corners, pill buttons, organic blobs, and creative shapes with a live preview and instant CSS output.

What Is a Border Radius Generator?

A border radius generator is a visual tool that helps web designers create CSS border-radius values without manually calculating pixel or percentage values. Instead of typing numbers and refreshing your browser, you adjust sliders and see the shape change in real time.

The CSS border-radius property rounds the corners of an element. It's one of the most versatile CSS properties — capable of creating everything from subtle rounded corners to complex organic blob shapes.

How to Use This Border Radius Generator

1. Choose a preset — Start with rounded, pill, blob, leaf, drop, or morph shapes.
2. Adjust the sliders — Control each corner independently or link them together.
3. Set dimensions — Change the width and height to match your element.
4. Customize colors — Set the box color and preview background.
5. Copy the CSS — Click the copy button and paste into your stylesheet.

Key Features

Feature	Benefit
Individual corner control	Set each corner independently for unique shapes
Link/unlink corners	Toggle between uniform and custom corners
6 shape presets	Quick start with common border-radius patterns
Width & height controls	Match your actual element dimensions
Live preview	See the shape update instantly as you adjust
Copy to clipboard	One-click CSS export

Understanding CSS Border Radius

The Syntax

The border-radius property accepts up to four values, one for each corner:

border-radius: top-left top-right bottom-right bottom-left;

Value Pattern	Corners Affected
16px	All four corners equally
16px 8px	Top-left + bottom-right / top-right + bottom-left
16px 8px 4px	Top-left / top-right + bottom-left / bottom-right
16px 8px 4px 2px	Each corner individually

Pixels vs Percentages

• Pixels (px): Fixed corner radius regardless of element size.
• Percentages (%): Relative to the element's dimensions. 50% on a square creates a perfect circle; 50% on a rectangle creates an ellipse.

Using Percentages for Circles and Pills

A border-radius: 50% creates a perfect circle when width equals height. For pill-shaped buttons, use a large pixel value (like 999px) — this ensures the radius always exceeds half the shorter dimension, creating fully rounded ends regardless of element size.

Shape Presets Comparison

Preset	Values	Use Case
Rounded	16px uniform	Cards, modals, images
Pill	999px uniform	Buttons, tags, badges
Blob	60px 40px 70px 30px	Decorative elements, hero sections
Leaf	0 100px 0 100px	Organic UI elements, decorative dividers
Drop	0 100px 100px 0	Tooltips, callouts, pointers
Morph	30px 70px 50px 80px	Abstract shapes, backgrounds

Real-World Use Cases

Button Styling

Create pill-shaped buttons with border-radius: 999px for a modern, friendly look used by most design systems.

Card Components

Subtle rounding (8–16px) softens card edges and creates visual hierarchy without being distracting.

Profile Avatars

Use border-radius: 50% on square images to create circular avatars, common in social apps and dashboards.

Decorative Blobs

Asymmetric radius values on large background elements create trendy organic blob shapes popular in modern web design.

Custom Tooltips

Use mixed values (e.g., 8px 8px 8px 0) to create a tooltip with one sharp corner pointing to the trigger element.

Tips for Better Border Radius

Tip	Explanation
Stay consistent	Use the same radius across your design system (e.g., 8px for small, 16px for large).
Use relative units	For responsive circles, use 50% instead of a fixed pixel value.
Large values for pills	Use 9999px or 999px to guarantee fully rounded ends on any element.
Unlink for organic shapes	Asymmetric corners create interesting, unique shapes.
Mind the content	Ensure text and inner content aren't clipped by aggressive rounding.
Combine with transforms	Rotate or skew elements with custom radii for even more creative shapes.

Frequently Asked Questions

What happens when border-radius is larger than the element?

The browser clamps the value to half the shorter dimension. So a border-radius: 999px on a 60px-tall button becomes effectively 30px, creating a perfect pill shape.

Can I use different horizontal and vertical radii?

Yes. The border-radius shorthand supports an alternative syntax: border-radius: 50px / 25px sets horizontal and vertical radii separately, creating elliptical corners. This generator focuses on uniform radii per corner.

How do I create a circle?

Set border-radius: 50% on a square element (equal width and height). If the element isn't square, you'll get an ellipse.

Does border-radius affect layout?

No. border-radius only affects the visual rendering and clipping of the element. It does not change the element's box model or affect surrounding elements.

Can I animate border-radius?

Yes. border-radius is animatable and performs well since it doesn't trigger layout recalculations. It's great for hover effects and transitions.

Does this tool work on mobile?

Yes. The generator is fully responsive and works on any device. All calculations happen in your browser.