CSS Border Radius Generator

This free CSS border radius generator rounds the corners of any element with a live preview — drag the handles on each corner, or set exact values per corner. Build standard rounded corners, elliptical curves, and fancy organic blob shapes, then copy the border-radius as CSS, Tailwind, or HTML.

Presets:

Unit

Tip: drag the round handles on the preview corners, or use a corner's slider here. Arrow keys nudge a focused handle (Shift = ×10).

Width

Height

Fill

Color

Gradient (CSS)

Need one? Build it in the Gradient Generator.

A checkerboard fill — useful for spotting exactly where the rounded corners clip.

Live Preview

Value order (clockwise)

1 value: All four corners
2 values: TL+BR, then TR+BL
4 values: TL, TR, BR, BL
a b c d / e f g h: Horizontal / vertical

Common shapes

50%: Circle (on a square)
9999px: Pill / stadium
12px 12px 0 0: Top corners only
0: Square corner

Units

px: Fixed radius
%: Relative to width × height
rem / em: Scales with font size

Patterns

Blob: elliptical % per corner
Avatar: 50% on a square
Clip image: overflow: hidden
Card: 8–24px all

What is border-radius in CSS?

The border-radius property rounds the corners of an element's outer border edge. It works on virtually any box — buttons, cards, images, inputs, avatars — and is painted directly by the browser, so it adds no network request and stays crisp at any size. A single value rounds all four corners equally; supply up to four values to control each corner; and add a second set after a slash to make corners elliptical (oval) rather than circular.

Radii accept px, %, rem, and em units. A percentage is special: the horizontal radius is measured against the element's width and the vertical radius against its height, which is why border-radius: 50% turns a square into a circle. This free CSS border radius generator writes the exact shorthand for you while you drag and tweak the corners visually.

How to use this generator

Start from a preset or hit Random Blob for an instant organic shape. Then refine: drag the round handles on each corner of the live preview, or type exact numbers in the Corners tab. Toggle Link corners to round all four together, or switch it off for full per-corner control. Change the unit (px, %, rem, em) at any time — the shape is preserved. Turn on Elliptical corners to shape each corner's horizontal and vertical radius independently. Use the Box tab to resize the preview and change its fill so you can judge the rounding on a real surface. When it looks right, pick CSS, Tailwind, or HTML and copy.

Per-corner and elliptical (8-value) border-radius

The shorthand follows a clockwise order starting at the top-left:

One value — border-radius: 16px rounds all four corners the same.
Two values — border-radius: 16px 4px sets top-left & bottom-right to the first, top-right & bottom-left to the second.
Four values — border-radius: 16px 4px 0 8px targets top-left, top-right, bottom-right, bottom-left in turn. Use 0 to keep a corner square.
Elliptical — a slash splits horizontal from vertical radii: border-radius: 40px 20px / 20px 40px. With all four corners specified on both axes you reach the full eight-value form, where every corner is an independent oval. The matching longhands are border-top-left-radius, border-top-right-radius, and so on.

Creating organic blob shapes (fancy border-radius)

Soft, asymmetric blob shapes — often called fancy border-radius — are just elliptical percentage radii with a different value on every corner, for example border-radius: 63% 37% 46% 54% / 37% 53% 47% 63%. The trick is that the horizontal set (before the slash) and the vertical set (after it) don't match, which bends each corner by a different amount and gives the edge its hand-drawn, organic feel. Click Random Blob to generate a fresh one, nudge any corner handle to taste, then copy the CSS — blobs are popular for hero illustrations, avatars, and decorative section backgrounds. Animating between two blob values with a CSS transition creates the popular morphing or animated-blob effect.

One limitation worth knowing: inverted (concave) corners that curve outward — sometimes searched as "inverted border-radius" — can't be made with border-radius alone, which only ever rounds inward. Those notch effects need a radial-gradient mask or an SVG clip path instead.

Border radius in Tailwind CSS & browser support

Tailwind ships radius utilities — rounded, rounded-lg, rounded-full — plus per-side and per-corner variants like rounded-t-lg and rounded-tl-lg. For an exact custom radius, use an arbitrary value: rounded-[24px] or rounded-[12px_12px_0_0], writing spaces as underscores. Elliptical radii that contain a slash can't be expressed as a class (the / is Tailwind's opacity modifier), so apply those with the style attribute instead — the Tailwind tab above gives you the correct form automatically. As for support, border-radius has worked unprefixed in every modern browser for over a decade. One gotcha: rounding an element does not clip its children, so to round an image apply the same border-radius to it (or its wrapper) together with overflow: hidden, and add object-fit: cover so the picture fills the rounded box without stretching.

Designing the whole component? Pair this tool with our CSS Flexbox Generator and CSS Grid Generator for layout, and the CSS Gradient Generator for the fill — each exports ready-to-paste CSS the same way.

Frequently asked questions

border-radius rounds the corners of an element's outer border edge. A single value rounds all four corners equally; you can supply up to four values to round each corner independently, and a second set after a slash to make the corners elliptical (oval) instead of circular. It accepts px, %, rem, and em units, is painted by the browser with no image request, and clips the element's background and border to the rounded shape.

Give border-radius four values in the order top-left, top-right, bottom-right, bottom-left (clockwise), using 0 for the corners you want left square. For example, border-radius: 12px 12px 0 0 rounds only the top two corners — perfect for tabs and cards. You can also target a single corner with the longhand properties border-top-left-radius, border-top-right-radius, and so on. In this generator, turn off Link corners and drag or type each corner on its own.

A pixel value is a fixed radius that stays the same no matter how big the element is. A percentage is relative to the element's own dimensions — the horizontal radius is a percentage of the width and the vertical radius a percentage of the height — so it scales as the box resizes. border-radius: 50% turns a square into a circle and any rectangle into an ellipse. Use px for consistent UI rounding and % for shapes that must stay proportional.

For a circle, use a square element (equal width and height) and set border-radius: 50%. For a pill or stadium-shaped button, set the radius to at least half the element's height; border-radius: 9999px is the common shortcut because the browser clamps an over-large radius to the maximum that still fits. Use the Circle and Pill presets above to see both.

The slash separates the horizontal radii from the vertical radii. Everything before the / is the horizontal radius of each corner and everything after is the vertical radius, both following the top-left, top-right, bottom-right, bottom-left order. For example, border-radius: 40px 20px / 20px 40px gives each corner an elliptical (oval) curve instead of a circular one. Enable Elliptical corners in this tool to edit both axes per corner.

Organic blob shapes use elliptical percentage radii with different values on every corner, for example border-radius: 63% 37% 46% 54% / 37% 53% 47% 63%. The asymmetry between the horizontal set (before the slash) and the vertical set (after it) is what makes the edge look hand-drawn. Click Random Blob above to generate one instantly, then copy the CSS — blobs are popular for hero illustrations, avatars, and decorative section backgrounds.

Tailwind ships utilities such as rounded, rounded-lg, and rounded-full, plus per-side and per-corner variants like rounded-t-lg and rounded-tl-lg. For an exact custom radius, use an arbitrary value: rounded-[24px] or rounded-[12px_12px_0_0] (write spaces as underscores). Elliptical radii with a slash don't translate cleanly to a class because / is Tailwind's opacity modifier, so apply those with the style attribute — the Tailwind tab above outputs the right form for whatever you build.

On its own, border-radius only rounds the element's own background and border — child content and images can still poke past the rounded corners. Add overflow: hidden to the rounded element to clip its children to the curve (commonly used for rounded image cards). border-radius has been supported unprefixed in every modern browser — Chrome, Firefox, Safari, and Edge — for well over a decade, so no fallback or vendor prefix is needed.