Skip to content

CSS Border Radius Generator - Create Rounded Corners & Blob Shapes

Free online CSS border-radius generator with live preview. Create rounded corners, circles, pill shapes, and organic blob shapes with per-corner control. Copy CSS & Tailwind code instantly.

Updated

What is the CSS Border Radius Generator - Create Rounded Corners & Blob Shapes?

Design beautiful rounded corners, circles, pills, and organic blob shapes with our free online CSS border-radius generator. Get instant live preview, per-corner control, and copy-ready CSS + Tailwind code.

Why Use This Border Radius Generator?

Unlike basic generators, our tool combines simple rounded corners with advanced elliptical blob mode, giving you complete control over every corner:

  • Two Modes: Simple (uniform radius) + Advanced (elliptical 8-point control for blobs)
  • Per-Corner Control: Independently adjust top-left, top-right, bottom-right, bottom-left
  • Unit Selector: Choose pixels (px) or percentages (%)
  • 14 Built-in Presets: Sharp, Smooth, Rounded, Circular, Pill, Blob, Bubble, Lens, Stamp, Card, Stadium, Message, Wavy, Organic
  • Inverted Corners: Create unique inward-curve effects (calc(100% - X))
  • Link All Corners: Toggle between linked or independent corner control
  • Random Generator: Instantly create unique blob shapes
  • Multiple Outputs: Shorthand CSS, Longhand CSS, Tailwind classes
  • Live Preview: See changes instantly as you adjust values
  • 100% Client-Side: No server, nothing uploaded, works offline

What Can You Create?

Shape Type Use Case Preset
Sharp corners Data tables, grids Sharp
Smooth rounded UI cards, containers Smooth, Card
Circular corners Icons, avatars Circular
Full pill shape Buttons, badges Pill
Organic blobs Decorative elements Blob, Organic
Speech bubbles Chat interfaces Message, Speech
Wavy patterns Creative designs Wavy
Inverted corners Modern UI effects Custom

Perfect For

  • Frontend Developers building React, Vue, or Angular components
  • UI/UX Designers creating mockups in Figma or Sketch
  • Tailwind Users getting ready-to-use class names
  • CSS Beginners learning border-radius syntax
  • Anyone needing rounded corners without memorizing values

Start designing now — no signup required. Just adjust values, see the preview, and copy your CSS!

How it works

Step-by-Step Guide

1. Choose Your Mode

Simple Mode (default):

  • Best for standard rounded corners
  • One value per corner (top-left, top-right, bottom-right, bottom-left)
  • Use presets for instant shapes

Advanced Mode (Blob/Elliptical):

  • Best for organic, irregular shapes
  • 8-point control: horizontal + vertical for each corner
  • Creates elliptical border-radius syntax

2. Set Your Unit

  • Pixels (px): Fixed sizes (e.g., 8px, 16px, 9999px)
  • Percent (%): Relative to element size (e.g., 50%, 75%)

3. Pick a Preset (Optional)

Click the preset dropdown to instantly apply common shapes:

  • Sharp: 0px (no rounding)
  • Smooth: 4px (subtle rounding)
  • Rounded: 8px (standard UI)
  • Circular: 16px (pronounced curves)
  • Pill: 9999px (full circle ends)
  • Blob: 46px/56px (organic shape)

4. Adjust Corner Values

Simple Mode:

  • Toggle "Link all corners" to control all 4 corners together
  • Toggle "Inverted corners" for inward curves
  • Enter values for each corner (0–10000px)

Advanced Mode:

  • Set horizontal radius (curves left-right)
  • Set vertical radius (curves top-bottom)
  • Each corner has independent H+V controls

5. Click "Random" for Instant Blobs

Hit the Random button to generate unique blob shapes automatically. Great for creative backgrounds or decorative elements.

6. View Live Preview

The centered preview box shows your shape in real-time with dark background and white text.

7. Copy Your Code

Get code in 3 formats:

Shorthand CSS (most common):

border-radius: 8px;
/* or */
border-radius: 8px 16px 8px 16px;

Longhand CSS (explicit per-corner):

border-top-left-radius: 8px;
border-top-right-radius: 16px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 16px;

Tailwind CSS (utility classes):

<!-- Uniform -->
<div class="rounded-lg">
<!-- Per-corner -->
<div class="rounded-tl-lg rounded-tr-2xl rounded-br-lg rounded-bl-2xl"></div>
</div>

8. Use in Your Project

Copy the code and paste it into:

  • Your CSS file
  • React/Vue component style
  • Tailwind className
  • Figma code plugin

Understanding Elliptical Syntax

Advanced mode generates elliptical border-radius:

/* Format: horizontal / vertical */
border-radius: 50px 60% 45px 55% / 40% 50px 55% 45px;

/* Values before "/" = horizontal radii */
/* Values after "/" = vertical radii */

This creates non-circular curves for organic shapes.

Tips for Best Results

  • Pill badges: Use 9999px for all corners
  • Subtle UI: 4–8px works for most cards
  • Avatars: 50% creates perfect circles
  • Blobs: Use 20–80px range with different values per corner
  • Inverted: Try 8–24px for modern corner effects

Examples

Create a Rounded Card with 8px Corners

Generate standard rounded corners for UI cards

Top-left: 8px, Top-right: 8px, Bottom-right: 8px, Bottom-left: 8px
 
border-radius: 8px;

Build a Pill/Badge Shape

Create a full pill shape for badges or buttons

All corners: 9999px (linked)
 
border-radius: 9999px;

Generate an Organic Blob Shape

Create irregular blob shapes with advanced elliptical mode

Top-left: 50px 40%, Top-right: 60% 50px, Bottom-right: 45px 55%, Bottom-left: 55% 45px
 
border-radius: 50px 60% 45px 55% / 40% 50px 55% 45px;

Create Inverted Corners Effect

Make corners curve inward instead of outward

All corners: 16px (inverted mode enabled)
 
border-radius: calc(100% - 16px);

Frequently asked questions

What is CSS border-radius and why do I need it?

CSS border-radius creates rounded corners on elements instead of sharp 90° angles. It's essential for modern UI design — making cards, buttons, inputs, and containers look polished and professional. Without it, designs appear outdated and harsh.

What's the difference between Simple and Advanced mode?

Simple mode: Standard border-radius with one value per corner (e.g., 8px 16px 8px 16px). Best for uniform rounded corners. Advanced mode: Elliptical border-radius with horizontal + vertical values per corner (e.g., 50px 60% 45px 55% / 40% 50px 55% 45px). Creates organic blob shapes with non-circular curves.

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

Set all corners to the same large value:

  • Pixels: border-radius: 9999px; (or any value ≥ half element width)
  • Percent: border-radius: 50%; (works on any square element)

What's the "inverted corners" feature?

Inverted corners curve inward instead of outward using calc(100% - X). Creates a modern "cut corner" effect popular in contemporary UI design. Toggle it on for unique shape variations.

Can I round only specific corners?

Yes! Use per-corner control:

/* Only round top corners */
border-radius: 8px 8px 0 0;
/* Only round top-left and bottom-right */
border-radius: 8px 0 0 8px;

Our generator makes this easy with independent corner inputs.

What's the best border-radius for UI cards?

8px is the industry standard (used by GitHub, Tailwind UI, Vercel). For subtle rounding, use 4px. For more pronounced curves, use 12–16px.

How do I create blob/organic shapes?

Use Advanced mode:

  1. Set different horizontal values for each corner (e.g., 40px, 60px, 45px, 55px)
  2. Set different vertical values (e.g., 55px, 45px, 60px, 40px)
  3. Or click "Random" for instant unique blobs

What's the difference between shorthand and longhand CSS?

Shorthand (compact):

border-radius: 8px 16px 8px 16px;

Longhand (explicit):

border-top-left-radius: 8px;
border-top-right-radius: 16px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 16px;

Both work identically — shorthand is cleaner, longhand is more readable.

Can I use border-radius with Tailwind CSS?

Yes! Our generator outputs Tailwind classes:

  • rounded = 4px
  • rounded-lg = 8px
  • rounded-2xl = 16px
  • rounded-full = 9999px (pill/circle)
  • rounded-tl-lg rounded-tr-2xl ... = per-corner control

What's the maximum border-radius value?

Technically unlimited, but 9999px is practical for full circles/pills. Values beyond element size don't change the shape.

Does border-radius work with all browsers?

Yes! Border-radius is supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2010. No vendor prefixes needed for modern projects. Our generator includes them optionally for legacy support.

How do percentages work in border-radius?

Percentages are relative to element dimensions:

  • Horizontal radius: % of element width
  • Vertical radius: % of element height Example: border-radius: 50% 50% / 50% 50%; on a 200×100px element = 100px horizontal, 50px vertical radii.

What's the difference between px and % units?

Pixels (px): Fixed size, consistent across devices. Best for most UI elements. Percent (%): Scales with element size. Best for responsive designs where elements change width/height.

Can I create a speech bubble with this tool?

Yes! Use preset "Message" or "Speech", or manually set:

  • Top corners: 16–32px
  • Bottom-right: 4–8px
  • Bottom-left: 16–32px This creates the classic speech bubble with sharp bottom-right corner.

Related tools

More utilities you might find handy.

Calculator

Absolute Difference Calculator

Calculate the absolute difference between two numbers with percentage comparisons and midpoint analysis.
Calculator

Age Calculator

Calculate your exact age in years, months and days from your date of birth.
Calculator

Aspect Ratio Calculator

Calculate aspect ratios, simplify dimensions, and solve for missing width or height with a live visual preview.