CSS Border Radius Generator

CSS Border Radius Generator - Create Any Corner Style

Generate CSS border-radius values from simple rounded corners to complex organic blob shapes. Features three modes: simple for uniform corners, advanced for individual corner control, and blob for creating unique organic shapes with the advanced border-radius syntax.

What is CSS border-radius?

CSS border-radius rounds the corners of an element's border. It can take 1-4 values:

One value: Same radius for all corners
border-radius: 20px;

Two values: top-left/bottom-right and top-right/bottom-left
border-radius: 20px 40px;

Three values: top-left, top-right/bottom-left, bottom-right
border-radius: 20px 40px 60px;

Four values: Individual corners (clockwise from top-left)
border-radius: 20px 40px 60px 80px;

The property accepts px, %, em, rem, and other CSS units. Using 50% on a square creates a circle.

How do I create blob shapes with border-radius?

Blob shapes use the advanced border-radius syntax with 8 values separated by a slash (/):

border-radius: h1 h2 h3 h4 / v1 v2 v3 v4;

The values represent:
- h1-h4: Horizontal radii (top-left, top-right, bottom-right, bottom-left)
- v1-v4: Vertical radii (top-left, top-right, bottom-right, bottom-left)

Example blob shape:
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;

This creates an organic, asymmetric shape. The horizontal and vertical radii combine at each corner to form an elliptical curve.

Tips:
- Use percentages for scalable shapes
- Values that sum to 100% create smooth transitions
- Experiment with contrasting H/V values for more organic results

What's the difference between px and % units?

Pixel (px) units:
- Fixed size regardless of element dimensions
- 20px always creates 20px radius
- Best for consistent sizing across different elements
- May not scale well with responsive designs

Percentage (%) units:
- Relative to element dimensions
- Horizontal % is relative to width
- Vertical % is relative to height
- 50% on a square creates a circle
- Scales with element size

When to use each:

px: Buttons, cards, fixed-size elements
%: Avatars, responsive shapes, blob effects

Example:
A 100x100px box with border-radius: 50px = border-radius: 50%
But on a 200x100px box, 50% creates an ellipse while 50px stays circular.

What are common border-radius use cases?

Common use cases:

Buttons:
border-radius: 6px; (subtle rounding)
border-radius: 999px; (pill shape)

Cards:
border-radius: 12px; (modern look)
border-radius: 24px; (soft, friendly)

Avatars:
border-radius: 50%; (perfect circle)

Images:
border-radius: 8px; (softened edges)
border-radius: 50%; (circular profile pics)

Modals/Dialogs:
border-radius: 16px; (premium feel)

Tabs:
border-radius: 8px 8px 0 0; (top corners only)

Chat bubbles:
border-radius: 20px 20px 20px 4px; (speech bubble effect)

Decorative shapes:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; (blob)

Browser support for border-radius

Border-radius has excellent browser support:

Full support (no prefix needed):
- Chrome 5+
- Firefox 4+
- Safari 5+
- Edge 12+
- Opera 10.5+
- IE 9+

The advanced 8-value syntax (blob shapes) is also well-supported in all modern browsers.

Note: Very old browsers (IE8 and below) don't support border-radius at all, but they represent less than 0.1% of users.

No vendor prefixes (-webkit-, -moz-) are needed for modern browsers.

Key Features

• Three modes: Simple, Advanced, and Blob
• Simple mode for uniform corner radius
• Advanced mode for individual corner control
• Blob mode for organic shape creation
• 12 preset shapes to start with
• Random blob shape generator
• Support for px and % units
• Customizable preview size
• Customizable preview color
• Live preview with instant updates
• Copy CSS code to clipboard
• 100% client-side processing
• Dark mode support
• Mobile-friendly interface