What is CSS Border Radius Generator?

CSS Border Radius Generator is a visual tool that lets you create custom border-radius shapes by dragging handles directly on a live preview. Instead of guessing CSS values, you see the shape change in real time as you adjust it.

The tool supports both Simple mode (4 corner values) for standard rounded corners and Advanced mode (8-value syntax with horizontal/vertical per corner) for creating organic blob shapes, eggs, drops, and other creative forms.

Perfect for: This tool eliminates the trial-and-error process of manually coding border-radius values, giving you instant visual feedback and production-ready CSS code.

Who is this for?

Web Developers

Need precise border-radius values for buttons, cards, containers, and UI components with pixel-perfect accuracy.

Designers

Want to explore organic blob shapes for hero sections, decorative elements, and modern UI designs.

CSS Enthusiasts

Anyone working with CSS who wants a faster, more intuitive way to visualize and generate border-radius code.

How to Use

Basic Usage (Simple Mode)

Adjust Corner Values

Use the sliders or type values in the number inputs to set the radius for each corner (Top Left, Top Right, Bottom Right, Bottom Left).

Lock or Unlock Corners

Toggle Lock All to make all corners change together, or unlock to adjust each corner independently for asymmetric shapes.

Drag Handles

The shape preview updates instantly — you can also drag the handles directly on the shape for intuitive visual editing.

Copy CSS Code

Copy the generated CSS code with the Copy CSS button and paste it directly into your stylesheet.

Creating Organic Shapes (Advanced Mode)

Switch to Advanced Mode

Switch to Advanced mode to access 8 values — each corner gets separate horizontal (H) and vertical (V) radius controls.

Use Slash Syntax

This enables the CSS slash syntax: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 for elliptical corners and organic shapes.

Fine-Tune with 8 Handles

Drag the 8 handles along the edges of the shape, or use sliders for precise control over horizontal and vertical radius values.

Generate Random Shapes

Click Random to generate interesting blob shapes instantly — perfect for creative exploration and unique designs.

Using Presets

Click the Presets toggle to reveal 12 built-in shapes including Rounded, Pill, Circle, Leaf, Drop, Egg, and various Blob styles. Clicking a preset automatically applies its values and switches to the appropriate mode.

Quick Start: Presets are the fastest way to get started. Choose a preset close to your desired shape, then fine-tune it with sliders or drag handles.

Nested Radius Calculator

When placing a rounded child element inside a rounded parent with padding, the inner radius must be calculated as: inner = max(0, outer - padding). Open the Nested Radius Calculator section, enter the outer radius and padding, and the tool calculates the correct inner radius with a visual preview.

Without Calculation

Mismatched Radii

Inner corners don't align with outer
Awkward visual gaps
Unprofessional appearance

With Calculation

Perfect Alignment

Mathematically correct inner radius
Smooth, consistent curves
Professional, polished look

Features

Two Editing Modes

Simple mode provides 4 sliders for standard rounded corners. Advanced mode exposes the full 8-value CSS border-radius syntax, letting you set independent horizontal and vertical radius per corner for organic blob shapes.

Visual Drag Handles

Drag handles are placed directly on the shape preview. In Simple mode, 4 handles sit at the corners. In Advanced mode, 8 handles appear along the edges with guide lines showing the radius direction.

Unit Toggle (px / %)

Switch between pixel and percentage units. Values are automatically converted when you toggle, so your shape stays consistent across different unit systems.

Lock All Corners

When locked, adjusting any corner applies the same value to all four corners for uniform rounding. Unlock for individual control and asymmetric designs.

12 Built-in Presets

Quickly apply common shapes: Rounded, Pill, Circle, Leaf, Ticket, Drop, Egg, Blob (3 variants), Badge, and Message. Each preset shows a mini shape preview for easy selection.

Randomize

Generate random organic shapes with one click. The tool automatically switches to Advanced mode and creates unique blob-like forms perfect for creative projects.

Customizable Preview

Adjust the preview dimensions (width and height from 100px to 500px) to test how your border-radius looks at different element sizes. Change the shape color and background color with built-in color pickers.

Nested Radius Calculator

A collapsible utility that calculates the correct inner border-radius when a child element sits inside a padded, rounded parent. Enter the outer radius and padding to get the mathematically correct inner radius, with a visual preview.

Instant CSS Output

The generated CSS code updates in real time and can be copied to your clipboard with one click. The output uses shorthand notation and includes the slash syntax when horizontal and vertical values differ.

Frequently Asked Questions

What is the difference between Simple and Advanced mode?

Simple mode uses the standard 4-value border-radius (one value per corner) — perfect for buttons, cards, and standard UI elements with circular rounded corners.

Advanced mode uses the 8-value CSS syntax where each corner has separate horizontal and vertical radius, enabling organic blob shapes, elliptical corners, and creative forms that aren't possible with 4 values.

What does the slash (/) mean in border-radius?

The CSS border-radius property supports a slash syntax: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4.

Values before the slash control horizontal radius, and values after control vertical radius. When these differ, the corners become elliptical rather than circular, creating organic shapes like eggs, drops, and blobs.

Example: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% creates an egg-like shape with different horizontal and vertical curvature.

Should I use px or % for border-radius?

The choice depends on your use case:

Use px for fixed-size elements like buttons and icons where you want exact control and consistent rounding regardless of element size
Use % for responsive elements or when creating blob/organic shapes — 50% on a square creates a perfect circle, and percentage values scale proportionally with element dimensions

Pro tip: For responsive designs, percentage values often work better as they maintain proportional rounding when elements resize.

What is the Nested Radius Calculator for?

When you have a rounded parent element with padding, the inner child needs a smaller border-radius to look correct and maintain visual harmony.

The formula is: inner radius = max(0, outer radius - padding)

Example: A card with 16px border-radius and 8px padding needs an 8px inner radius on its content area. Without this calculation, the inner corners won't align properly with the outer curve, creating an awkward visual gap.

Common mistake: Using the same border-radius value for both parent and child elements when padding is present — this creates misaligned corners and an unprofessional appearance.

Can I use the generated CSS in any framework?

Yes. The output is standard CSS that works in all modern browsers and is compatible with any framework or development environment.

You can paste it directly into:

Standard CSS stylesheets (.css files)
Inline styles in HTML
CSS-in-JS solutions (styled-components, Emotion, etc.)
CSS modules
Tailwind CSS arbitrary values
Any preprocessor (SCSS, LESS, Stylus)

The generated code uses standard CSS properties with excellent browser support (IE9+, all modern browsers).