CSS Border Radius Generator

Control each corner independently. Create circles, pills, blobs, and organic shapes visually.

Last reviewed: April 2026

Reviewed by Shannon Patterson, software engineer · last updated April 2026

New to this tool? Click here for instructions

Top-Left 20px

Top-Right 20px

Bottom-Right 20px

Bottom-Left 20px

Width: 160px Height: 160px Color:

Generated CSS

border-radius: 20px;

Adjust sliders to generate your border-radius CSS.

How to Use the Border Radius Generator

The CSS Border Radius Generator is a free online tool that allows you to visually create and customize CSS border-radius values. Here's how to use it:

1. Choose a Mode: Select between Simple, Advanced, or Presets. Simple mode is ideal for uniform rounded corners, while Advanced mode lets you create complex blob shapes with 8 independent values. Presets offer common shapes like circles, pills, and blobs.

Simple mode: Uniform rounded corners
Advanced mode: Blob shapes with 8 independent values
Presets: Common shapes like circles, pills, and blobs

When to Use the Tool in Real Workflows

Use the CSS Border Radius Generator when you need to create visually appealing and responsive shapes without writing complex CSS. It's particularly useful for designers and developers working on web projects that require custom shapes for buttons, icons, and backgrounds.

How It Works

The tool works by allowing you to visually adjust the border-radius values for each corner of an element. You can use either pixel (px) or percentage (%) values. The preview box updates instantly as you make changes, allowing you to see the effect of your adjustments in real-time.

Tips, Edge Cases, or Limitations

1. Performance Considerations: While CSS border-radius is generally GPU-accelerated, very high values on complex backgrounds or box-shadows can occasionally trigger paint layers. For best performance, use `will-change: transform` on elements that animate their border-radius.

2. Percentage vs. Pixel Values: Percentage values scale with the element's dimensions, making them ideal for responsive designs. Pixel values remain fixed, which can be useful for maintaining design consistency across different screen sizes.

3. CSS Custom Properties: Combine border-radius with CSS custom properties for theme-consistent rounding. This allows you to easily adjust the radius values across your entire design system.

Frequently Asked Questions

CSS border-radius is a property that allows you to create rounded corners on elements. It can be used to create simple rounded shapes or complex blob forms.

To create a circle, set the border-radius to 50% for a square element. This will make all four corners round, forming a circle.

The slash syntax in border-radius allows you to specify different horizontal and vertical radii for each corner. For example, `border-radius: 40% 60% 70% 30% / 30% 70% 60% 40%` creates a blob shape with asymmetric radii.

Yes, you can mix pixel (px) and percentage (%) values in border-radius. Percentage values scale with the element's dimensions, while pixel values remain fixed.

Simple mode provides uniform rounded corners, while Advanced mode allows for 8 independent values to create complex blob shapes. Presets offer common shapes like circles, pills, and blobs.

Quick reference

CSS Border Radius Generator — quick reference
Aspect	Detail
Purpose	CSS Border Radius Generator is a free browser tool for fast, repeatable tasks.
Runs in	Any modern browser — no install, no signup.
Privacy	Data is processed locally in your browser; no upload to any server.
Best for	Quick lookups, daily reference, learning, prototyping.