Output follows CSS border-radius shorthand, including optional slash syntax for elliptical corners. Preview the result in your target browsers before shipping.

Skip to border radius generator

Border Radius Generator

Visually create CSS border-radius values, rounded corners, pills, circles, and organic blob shapes — then copy clean CSS or Tailwind instantly.

Example output

border-radius: 16px;

Tailwind: rounded-[16px]

Values are computed locally—nothing is uploaded. After you set corners, add depth with the Box Shadow Generator.

Loading tool…

By Muhammad Abdullah Rauf · Founder, EverydayTools.proUpdated 2026-09-20· Reviewed by EverydayTools Editorial Team

What is a CSS border radius?

border-radius rounds the corners of an element. One value such as 12px rounds every corner; more values set corners independently, and a slash separates horizontal and vertical radii.

The CSS border-radius property rounds an element’s outer corners. A single length applies to all four corners:

border-radius: 12px;

Two, three, or four values follow clockwise order: top-left → top-right → bottom-right → bottom-left. When you need elliptical corners or organic blobs, add a slash and a second set of radii for the vertical axis.

This generator builds that CSS visually. Use it when you need exact rounded-corner syntax for cards, buttons, avatars, pills, or decorative shapes—not a downloadable font and not an SVG path tool.

Adjust the preview above, then copy the shortest valid CSS. Prefer native design-system tokens when you already have them.

How to use the Border Radius Generator

  1. Start from a preset or the default

    The default is 16px on all corners. Use Card, Pill, Circle, or a blob preset when you want a known shape.

  2. Adjust the corners

    Keep corners linked for one radius, or switch to Per corner. Order is always top-left, top-right, bottom-right, bottom-left.

  3. Pick a unit

    Use px or rem for UI tokens. Use % for circles, pills that should scale, and blobs.

  4. Open Advanced / blob for elliptical shapes

    Eight percentage values with a slash create organic shapes. Randomize blob generates a valid combination.

  5. Copy CSS or Tailwind

    Copy the declaration, the value only, a Tailwind arbitrary class, or a CSS variable. Nothing is uploaded.

CSS border-radius syntax

One value sets every corner. Two values set the diagonals (top-left + bottom-right, then top-right + bottom-left). Three values set top-left, the paired sides, then bottom-right. Four values set each corner clockwise from top-left.

Elliptical syntax adds a slash: horizontal radii / vertical radii. Percentage radii are relative to the relevant border-box dimension (width for the horizontal radius, height for the vertical radius), as documented on MDN.

This tool emits the shortest equivalent shorthand and never writes negative radii.

Formula

1 value:  border-radius: 16px;
2 values: border-radius: 16px 32px;
4 values: border-radius: 8px 16px 24px 32px;
8 values: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Assumptions

  • Corner order is top-left → top-right → bottom-right → bottom-left
  • Percentages scale with the element’s border box
  • 50% is a circle only when width equals height
  • Advanced mode in this tool uses percentage radii on both axes

Limitations

  • border-radius only rounds rectangular boxes—it is not clip-path or an SVG blob path
  • Tailwind export is an arbitrary value, not a full rounded-* scale browser
  • 9999px is a pill trick, not a separate CSS property

Sources

When to use border-radius

Cards and modals

Rounded UI surfaces

8–16px keeps panels and dialogs consistent with most design systems.

Buttons and badges

Pills and chips

9999px (or a large rem) makes capsule ends. Pair with horizontal padding.

Avatars and images

Circles and clipped media

50% on a square makes an avatar. Use overflow: hidden on cards that contain photos.

Hero sections

Organic blobs

Eight-value slash syntax is for decorative shapes. Keep body text on a normal rectangle.

Border radius examples

Rounded card

Input

Dashboard panel

Output

border-radius: 12px;

A common card radius. Add overflow: hidden if child images must follow the curve.

Rounded button

Input

Standard control

Output

border-radius: 8px;

Subtle rounding that stays crisp at small sizes.

Pill

Input

CTA or chip

Output

border-radius: 9999px;

A very large radius clamps to capsule ends on a rectangle.

Circle

Input

Equal width and height

Output

width: 48px;
height: 48px;
border-radius: 50%;

50% on a non-square box is an ellipse, not a circle.

Different corners

Input

Asymmetric card

Output

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

Clockwise from top-left.

Blob

Input

Decorative hero shape

Output

border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Values before the slash are horizontal; values after are vertical.

Simple vs advanced border-radius

Four values vs elliptical slash syntax.

ModeCSSBest for
Simpleborder-radius: 16px;Cards, buttons, tokens
Four corners8px 16px 24px 32pxAsymmetric UI
Advanced / blob60% 40% 30% 70% / 60% 30% 70% 40%Organic decorative shapes

Pixels vs percent

Percentage radii scale with the element; px do not.

UnitScales?Typical use
pxNoCards, buttons, design tokens
%Yes — relative to the border boxCircles, pills, blobs
rem / emWith font sizeType-linked component scales

MDN documents percentage radii against the relevant width or height of the border box.

Four-value corner order

SlotCornerLonghand
1Top-leftborder-top-left-radius
2Top-rightborder-top-right-radius
3Bottom-rightborder-bottom-right-radius
4Bottom-leftborder-bottom-left-radius

Common border-radius mistakes

Mixing up corner order

CSS is clockwise from top-left. Copy the generated shorthand instead of guessing.

Assuming 50% always makes a circle

The element must have equal width and height. Otherwise you get an ellipse.

Using px when the shape should scale

Circles, fluid pills, and blobs usually want %. Cards and buttons usually want px or rem.

Forgetting width and height affect percentage radii

Horizontal % uses width; vertical % uses height. Resize the preview to see it.

Too many unique radii in one product

Pick a small token scale (4, 8, 12, 16) unless a shape is intentionally decorative.

Invalid Tailwind arbitrary syntax

Spaces become underscores: rounded-[16px_24px]. Slash syntax stays as / inside the brackets.

Missing overflow: hidden on rounded image cards

border-radius rounds the box; children can still paint square corners unless you clip them.

Using 8-value syntax without the slash

Horizontal and vertical groups must be separated by /. Advanced mode writes that for you.

Border radius and Tailwind CSS

Use named utilities when they match

rounded-lg, rounded-2xl, and rounded-full cover many UI cases. This generator is for custom or per-corner values.

Copy arbitrary values for custom radii

rounded-[16px] or rounded-[60%_40%_30%_70%/60%_30%_70%_40%] is valid Tailwind JIT syntax.

Prefer a CSS variable for shared tokens

--radius: 16px; keeps cards and buttons aligned without repeating magic numbers.

When this tool isn't the right choice

Your own design system already has radius tokens

Use those tokens. This tool is for exploring or exporting a value you do not have yet.

You need a non-rectangular mask

Use clip-path or SVG. border-radius only rounds a box.

You need elevation, not corners

Use the Box Shadow Generator.

Workflow guides

Step-by-step chains that connect related tools for common tasks.

Round a card, then add shadow

  1. Set 12px or 16px above and copy the CSS.
  2. Add elevation with the Box Shadow Generator .

Match a fill after you set corners

  1. Copy the radius for your card or blob.
  2. Build the background in the CSS Gradient Generator .

Border radius vs related EverydayTools

This page owns CSS border-radius. Use another generator when you need shadows, fills, full buttons, or non-rectangular masks.

Related toolUse this tool whenUse related tool when
Box Shadow GeneratorYou need rounded corners.You need offset, blur, spread, and shadow color.
CSS Gradient GeneratorYou are shaping corners, not fills.You need a linear, radial, or conic background.
CSS Button GeneratorYou only need a radius token.You want hover, padding, and a full button stylesheet.
Clip Path GeneratorA rounded rectangle is enough.You need polygons, stars, or custom silhouettes.
Tailwind CheatsheetYou already have rounded-[16px] from this tool.You need named utilities such as rounded-lg.

What to do next

Continue the workflow with the right follow-up tool.

Advertisement

Frequently asked questions

What is a CSS border radius generator?

It is a visual tool that builds border-radius CSS. You adjust corners, preview the shape, and copy the declaration or a Tailwind class.

How do I add rounded corners in CSS?

Set border-radius on the element—for example border-radius: 12px—or copy the output from this generator.

What is the CSS border-radius syntax?

One to four lengths or percentages, optionally followed by / and another one to four values for the vertical radii.

What order are the four border-radius values?

Top-left, top-right, bottom-right, bottom-left — clockwise from the top-left corner.

How do I set a different radius for each corner?

Turn off Linked, set the four sliders, and copy the four-value shorthand.

How do I make a circle with border-radius?

Use equal width and height plus border-radius: 50%. The Circle preset does this.

How do I make a pill button in CSS?

Use a very large radius such as 9999px (Pill preset) and enough horizontal padding.

What is the difference between px and percentage border-radius?

px is a fixed length. % is relative to the element’s border box, so the curve changes if the box resizes.

What is the 8-value border-radius syntax, and what does the slash mean?

Four horizontal radii, a slash, then four vertical radii. That is how elliptical corners and CSS blobs are written.

How do I create a CSS blob?

Open Advanced / blob, pick Blob or Randomize blob, then copy the 8-value percentage rule. This is still border-radius, not an SVG path.

Can I use border-radius with images?

Yes. Apply it to the image or a wrapper. Use overflow: hidden on the wrapper if children would otherwise square off the corners.

How do I use border-radius in Tailwind CSS?

Use named classes such as rounded-lg, or paste this tool’s arbitrary class (rounded-[16px]). Spaces must be underscores.

Does border-radius work in modern browsers?

Yes. The property, including slash syntax, is supported in current Chrome, Firefox, Safari, and Edge.

Is this border radius generator free, and does it upload my values?

It is free and does not require an account. Radius values are generated in your browser and are not uploaded for conversion.

Privacy, accuracy, and trust

Privacy

Radius values are generated in your browser. They are not uploaded to EverydayTools for this generator. The URL is not rewritten as you drag sliders.

Accuracy

Shorthand compression and clockwise corner order follow the CSS border-radius specification as documented by MDN.

How this tool works

All mapping is client-side JavaScript.

Verification guidance

Set all corners to 16px. The CSS should collapse to border-radius: 16px;

Limitations: Not clip-path. Not SVG blobs. Not a Tailwind utility encyclopedia.

Preview the copied CSS in your product browsers, especially complex elliptical shapes.

Advertisement

Reviewed by EverydayTools Editorial Team on 2026-09-20.

Related tools

Same workflow or intent — pick the next step without leaving the site.

Box Shadow Generator

Create CSS box shadows with a live preview. Adjust offset, blur, spread, color and opacity, stack layers, then copy CSS or Tailwind instantly.

CSS Clip Path Generator

Create CSS clip-path shapes visually with draggable polygon points, circle, ellipse, and inset controls, live preview, and copy-ready CSS, Tailwind, or React. Browser-only — local images are not uploaded.

CSS Button Generator

Free CSS button generator — design custom buttons with gradients, shadows, border radius, and hover effects using visual controls. Copy the CSS and HTML instantly. No signup. Runs locally in your browser when supported—no upload required for normal use.

CSS Filter Generator

Free CSS filter generator — create blur, brightness, contrast, grayscale, hue-rotate, and other filter effects with live preview. Copy the CSS filter property. No signup. Runs locally in your browser when supported—no upload required for normal use.

CSS Gradient Generator

Free CSS gradient generator — create linear and radial gradients with custom colors, stops, and directions. Live preview and one-click CSS copy. No signup required. Runs locally in your browser when supported—no upload required for normal use.

Glassmorphism Generator

Build frosted glass CSS with WCAG contrast checker, layer composer, VisionOS/Fluent presets, and full export—CSS, Tailwind, tokens, share URL. Blur 0–40px. Browser-only, no signup.