Back to Developer Tools

CSS Border-Radius Generator

Visually design border-radius, including organic blob shapes.

border-radius: 30px 30px 30px 30px;

Related Guide

CSS Border-Radius Generator: From Rounded Cards to Organic Blob Shapes

Read Guide →

About This Tool

Free CSS border-radius generator — drag sliders to set each corner independently (top-left, top-right, bottom-right, bottom-left) with a live preview box, from simple rounded cards to organic "blob" shapes, then copy the exact `border-radius` CSS. No sign-up, no upload, entirely browser-based. Designers use asymmetric border-radius values to create soft, organic shapes for hero images, avatars, and decorative blobs that stand out from plain rounded rectangles. This tool makes it easy to preview the effect live and fine-tune the horizontal and vertical radius of each corner before copying clean CSS into your project.

How to Use

  1. 1

    Adjust each corner

    Drag the sliders for top-left, top-right, bottom-right, and bottom-left radius independently.

  2. 2

    Preview the shape

    Watch the live preview box update as you adjust — try extreme values for organic blob shapes.

  3. 3

    Copy the CSS

    Copy the generated `border-radius` shorthand directly into your stylesheet.

Frequently Asked Questions

Can border-radius create shapes other than rounded rectangles?+
Yes — using different horizontal/vertical radius values on each corner (the CSS border-radius shorthand supports this) can produce organic "blob" and leaf-like shapes, not just uniform rounded corners.
What is the CSS syntax for four different corner radii?+
The border-radius shorthand accepts up to four values for top-left, top-right, bottom-right, and bottom-left, and optionally a "/" to set horizontal and vertical radii separately for elliptical corners.
Does border-radius work on all elements?+
Yes, border-radius applies to any element with a visible box, including divs, images, and buttons, and is supported in all modern browsers.

Related Tools

CSS Minifier

Try it free →

Box-Shadow Generator

Try it free →

CSS Gradient Generator

Try it free →

Image Cropper

Try it free →