CSS Border Radius Generator

By Bogdan Sandu · Published 27 April 2026 · Last updated 13 September 2026

The CSS Border Radius Generator is a free, browser-based tool that lets you create and preview border radius values visually, without writing a single line of code.

Shape any element in seconds. Drag the sliders, pick a preset, or type exact values. The preview updates live.

Key features:

• Elliptical radii control both horizontal and vertical axes independently, unlocking shapes beyond simple rounded corners
• 10 presets including Pill, Circle, Squircle, Leaf, Ticket, Diamond, Wave, and Egg
• Multiple export formats: plain CSS, SCSS, CSS-in-JS, and Tailwind config
• Linked or independent corners for symmetrical or fully custom shapes
• Undo/Redo support so you can experiment freely
• Vendor prefix toggle for -webkit- compatibility
• Live preview with selectable backgrounds (solid, checkerboard, grid) and content types (text, avatar, button, card)

The generated CSS is ready to copy and paste. No sign-up, no installation, no nonsense.

What Is a CSS Border Radius Generator

A CSS Border Radius Generator is a browser-based visual tool that turns slider, drag-handle, or numeric corner inputs into ready-to-use CSS code.

Instead of typing values by hand, you drag a corner, watch the shape update, and copy the resulting border-radius declaration straight into your stylesheet.

Most generators offer the same core controls:

• Individual sliders or numeric fields for each corner
• A drag handle you can pull directly on the preview shape
• A live code panel showing the generated shorthand as you move

People reach for one mostly for the same handful of jobs. Rounding a card design, softening a button, shaping an avatar into a circle, or building an unusual blob-style panel for a hero section.

Design systems tend to formalize this decision rather than leave it to guesswork. Google's Material Design is a good example. It assigns fixed corner steps to specific component types instead of letting each screen pick its own number.

How Does the Border-Radius Property Work in CSS

The border-radius property rounds the corners of any box, from a plain div to a fully styled button. It works whether or not the element has a visible border.

It applies to the box model itself, so it affects the outer edge of padding and background. That holds even on elements built straight out of HTML markup with no extra wrapper.

.card {
  border-radius: 12px;
}

.avatar {
  border-radius: 50%;
}

Shorthand vs Longhand Syntax

border-radius is shorthand for four separate longhand properties, one per corner.

Writing all four out by hand is rarely necessary, but knowing the mapping matters once a design calls for asymmetry.

Values Given	Corners Affected	Example
One value	All four corners equally	border-radius: 12px;
Two values	Top-left/bottom-right, then top-right/bottom-left	border-radius: 12px 4px;
Four values	Top-left, top-right, bottom-right, bottom-left in order	border-radius: 12px 4px 12px 4px;

The four longhand equivalents, border-top-left-radius and the other three, accept the exact same values. They are what a generator writes behind the scenes when it needs to target one corner only.

/* shorthand */
border-radius: 12px 4px 12px 4px;

/* the same thing, longhand */
border-top-left-radius: 12px;
border-top-right-radius: 4px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 4px;

Four-Corner Radius Values

Corner order matters:

• Top-left is always first
• Top-right and bottom-right follow clockwise
• Bottom-left closes the loop

Get that order wrong in a hand-written declaration and the rounding lands on the wrong side of the box. It's one of the more common silent bugs in a stylesheet.

This exact corner syntax has been stable for a long time. The property reached Baseline Newly Available in July 2015 and Baseline Widely Available in January 2018, according to the web-features dataset behind MDN's compatibility table.

A generator sidesteps the ordering question entirely, since each corner has its own labeled control and the tool assembles the shorthand for you.

Which Units Does Border-Radius Support

Border-radius accepts a length-percentage value, which in practice means four real options show up in daily use: pixels, percentages, em, and rem.

Unit behavior differs more than it looks:

• px gives a fixed corner size that never changes with the element's own dimensions
• % calculates the corner as a fraction of the element's own width and height, which is what turns a square div into a perfect circle at 50%
• em scales the radius against the element's own font size
• rem scales against the root font size instead, so nested components stay consistent even when a parent changes its own type size

Picking between the last two comes up often enough that it's worth understanding the difference between em and rem before locking a value into a design system.

Percentage values are the ones that make a corner radius genuinely responsive. The shape recalculates automatically as part of a broader approach to responsive design, with no media query rewrite at every breakpoint.

Production design systems tend to lock these choices down with real numbers rather than picking a value per screen. Material Design 3's shape scale, for instance, specifies 4dp for its extra small corner step and 28dp for extra large surfaces, with several fixed steps in between.

How Does Elliptical Border-Radius Work

Elliptical border-radius uses a slash inside the value to set a different horizontal and vertical radius for the same corner. A plain radius only produces a single circular arc.

Horizontal and Vertical Radius Pairs

The syntax splits into two halves separated by a forward slash, horizontal radii first and vertical radii second.

/* horizontal radius 40px, vertical radius 20px, every corner */
border-radius: 40px / 20px;

/* four corners, each with its own horizontal / vertical pair */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

A single circular radius uses one number for both axes. An elliptical one lets the two axes differ, which stretches the curve instead of keeping it perfectly round.

Circular corners look identical from every angle and work well for avatars, badges, and buttons.

Elliptical corners stretch unevenly and suit wider components like pill-shaped tags or asymmetric hero panels.

A generator that exposes two sliders per corner, rather than one, is the fast way to build this pairing without doing the slash-syntax math by hand.

Squircle and Blob-Style Shapes

Apple's iOS app icons are not simple rounded rectangles. They use a superellipse, commonly called a squircle. The corner radius sits at roughly 22 percent of the icon's width, with continuous curve smoothing rather than a plain circular arc.

Standard border-radius cannot reproduce that continuous curve on its own, since it only draws circular or elliptical arcs.

The CSS Working Group has been addressing that gap directly. A new corner-shape property with a superellipse() function was resolved into the CSS Borders Module Level 4 draft. It adds keywords like squircle, bevel, scoop, and notch that reshape the curve inside an existing border-radius box. MDN currently lists it as limited availability, not yet safe to rely on without a fallback.

.icon {
  border-radius: 22%;
  corner-shape: squircle; /* limited availability, needs a fallback */
}

Until that lands everywhere, teams chasing a true blob or organic shape usually reach for one of two workarounds instead of stacking more border-radius values.

One route builds the shape as an SVG path, which gives full control over every curve point.

The other keeps it in plain CSS through a clip-path generator, cutting an irregular silhouette out of a normal rectangular box.

Browser Support for Border-Radius and Vendor Prefixes

Border-radius is one of the most widely supported CSS3 properties available today, with no meaningful gap left in modern browser coverage.

Current Browser Support

Support has been solid for well over a decade at this point.

Browser	Unprefixed Support Since
Chrome	Version 4
Firefox	Version 4
Safari	Version 5
Edge	Version 12 (first release)

Can I Use data, pulled from StatCounter GlobalStats in August 2026, puts global support for border-radius percentage values at 97.26% of tracked browser traffic worldwide.

That level of cross-browser compatibility is why almost no generator today bothers offering a legacy-browser fallback mode by default.

Vendor Prefix History

Three distinct eras exist:

• Webkit era: early Safari and Chrome builds needed -webkit-border-radius
• Mozilla era: early Firefox versions needed -moz-border-radius
• Modern era: every current browser accepts the unprefixed property, with no prefix required at all

A generator that still outputs both prefixed lines by default is padding your stylesheet with dead code nobody's browser will ever read.

How Do You Use a CSS Border Radius Generator

Using one follows the same short sequence regardless of which specific tool you open.

1. Pick a unit (px, % or em) and decide whether the corners stay linked or move independently.
2. Adjust each corner with its slider, or switch to the Vertical radii tab for an elliptical shape. The corner diagram shows which value maps to which corner.
3. Watch the live preview to confirm the rendered shape matches what you pictured. Numbers alone can be deceptive at small sizes, so swap in the avatar, button or card content to test against something real.
4. Copy the output in the format your project uses: CSS, SCSS, CSS-in-JS or Tailwind.

The preview content matters more than people expect. A percentage-based radius looks completely different on a square avatar than on a wide card.

This workflow shows up constantly in ordinary card design work, where four corners often need slightly different treatment to match a brand's visual language.

One habit worth building in: run the exported code through a CSS minifier before it ships to production. That catches extra whitespace and leftover prefixed lines.

Comparing CSS Border Radius Generator Tools

Generator tools split into a few recognizable categories once you line them up side by side.

Tool Type	Input Method	Typical Export	Cost
Drag-handle web generators (e.g. Fancy Border Radius Generator)	Direct drag on the shape	CSS shorthand	Free
Slider-based web generators	Numeric sliders per corner	CSS, sometimes SCSS	Free
Browser DevTools	Click and drag the value inline	None, edits live styles	Built in
Design software	Corner radius field on the shape	Manual translation to CSS	Free or paid

Chrome and Firefox DevTools both let you click a border-radius value in the rules panel and drag horizontally to change it. That covers quick one-off tweaks without opening a separate tool at all.

Design software sits a step apart from the rest. If you're already rounding corners inside Figma, the radius value shown there still has to be typed into CSS by hand or read off during handoff. It isn't exported as a usable declaration automatically.

Plenty of teams keep a small stack of single-purpose tools rather than one do-everything app. A radius generator pairs naturally with something like a CSS button generator for the rest of a component's styling.

Most developers still lean toward hand-written CSS over any visual step first. The State of CSS 2024 survey, run by Devographics, found that 60.9% of respondents implement their own designs directly in CSS. Only 34.6% design in a separate app before translating it into code.

Generator or Manual CSS: Which to Use

A CSS Border Radius Generator earns its keep on asymmetric, multi-value corners.

Hand-written CSS still wins on the simplest cases, where typing one remembered value is faster than opening a browser tab.

Manual CSS works best when:

• The design calls for one uniform radius across every corner
• The exact value already exists in a style guide or token file
• The change is a quick one-line edit inside an existing rule

A generator earns its place when:

• Corners need different values on each side
• Elliptical or slash-syntax values are involved
• The shape needs to be seen before a number gets committed to code

Production design systems tend to sidestep the whole debate by locking values into tokens ahead of time.

Shopify's Polaris design system ships a public border-radius token scale with named steps starting at 0px and moving up through 2px and 4px. Nobody on the team is picking a number by feel or reaching for a slider mid-build.

Once tokens exist, the real choice stops being generator versus manual entry. It becomes token versus improvisation.

Export Formats: CSS, SCSS, and Utility Classes

The right export format depends on what the rest of the codebase already expects, not on which button happens to be labeled "copy."

CSS and SCSS Output

Plain CSS output drops straight into a stylesheet with no extra step required.

SCSS output differs in a few concrete ways:

• Values can be stored as variables and reused across components
• A mixin can generate all four corner properties from a single input
• Nesting keeps corner rules scoped to their parent selector

Teams already running a Sass build pipeline get real mileage from SCSS output.

Teams without one just inherit extra syntax they'll compile straight back down to the same plain CSS anyway.

Utility-Class Output

Utility-first frameworks turn a border-radius value into a class name instead of a raw declaration.

Tailwind Class	rem Value	Pixel Equivalent
rounded-xs	0.125rem	2px
rounded-md	0.375rem	6px
rounded-xl	0.75rem	12px
rounded-4xl	2rem	32px

rounded-full sits outside that numeric scale entirely. Tailwind's own documentation defines it as calc(infinity * 1px), so a pill shape holds at any element size without a fixed number behind it.

Anyone choosing a utility-class approach is really choosing between Tailwind and Bootstrap naming conventions. Both frameworks ship their own rounding scale instead of raw border-radius values.

A generator that only outputs raw CSS is dead weight on a project standardized around either one. The real work becomes mapping a pixel value back to the nearest class name by hand.

When a Border Radius Generator Does Not Apply

Border-radius has a hard mathematical ceiling that no generator, drag handle or slider, can push past.

Complex or Organic Shapes

The CSS Backgrounds and Borders specification defines exactly what happens when adjacent corner radii ask for more room than the box has.

If the sum of two adjacent radii exceeds the length of that edge, the browser proportionally scales down every radius on the box until the curves stop overlapping.

That single rule is what caps a 100% radius on a square element back down to a visual 50%, producing a clean circle instead of a folded-over shape.

• Single symmetric curves: capped automatically, always rendering as a clean arc
• Multi-lobed or concave shapes: outside what any border-radius value can produce, generated or hand-written

The squircle and blob-style workarounds covered earlier exist precisely because this ceiling is fixed, not because border-radius generators haven't caught up yet.

For shapes that need to cut into an image rather than just round its container, CSS mask-image or an SVG <clipPath> picks up where border-radius stops.

Legacy Browser Requirements

Rendering environments outside the modern browser stack behave differently:

• Email clients: border-radius sits at 68.29% full support plus 14.63% partial support across tracked clients, per Can I Email data. That is well below the near-universal figure modern browsers post
• Outlook on Windows: versions from 2003 through 2019 render email through a Word-based engine that ignores border-radius entirely and requires a VML RoundRect element instead
• Yahoo Mail and AOL: support the property but drop the slash syntax used for elliptical corners

None of that contradicts the browser support figures covered earlier. It's a separate rendering pipeline that a generator's live preview was never built to simulate.

Common Border-Radius Mistakes and Fixes

Most border-radius bugs trace back to a handful of repeat offenders.

• Mixed units in one declaration: pairing px and % in the same shorthand produces corners that shift inconsistently across screen sizes. Pick one unit per component and stay with it
• Missing overflow control: a rounded container with a square image inside still shows square corners unless the parent sets overflow to hidden
• Corner order mistakes: forgetting the top-left, top-right, bottom-right, bottom-left sequence rounds the wrong side of an asymmetric box
• Leftover vendor prefixes: copying snippets from an old generator still ships -webkit- and -moz- lines that no current browser reads

/* the overflow fix: children and background images follow the curve */
.thumb {
  border-radius: 16px;
  overflow: hidden;
}

Pasting generator output straight into a production file without a second look is how the leftover-prefix problem usually survives a code review.

Running the exported block through a CSS beautifier first makes those dead lines obvious before they ever reach a pull request.

FAQ on CSS Border Radius Generator

What Is the Difference Between Border-Radius and Rounded Corners

"Rounded corners" describes the visual result. Border-radius is the specific CSS property that produces it, working on any box whether or not that box has a visible border. Designers say "rounded corners" loosely, covering border-radius, SVG paths, and clip-path shapes alike.

Can You Export Border-Radius Values Directly to Tailwind or Bootstrap Classes

The Tailwind tab on this generator writes a config entry, but no tool maps a pixel value straight to an existing utility class automatically. Tailwind and Bootstrap ship fixed rounding scales, so an arbitrary value still needs manual translation to the nearest class, like rounded-lg or .rounded-3.

Is a Border-Radius Generator Necessary for Responsive Design

No. Percentage-based border-radius already scales with an element's own width and height, so a single value adapts across breakpoints without a generator or a media query rewrite. A generator only speeds up finding that percentage visually rather than calculating it by hand.

Does Border-Radius Affect Background Images or Only Element Edges

Border-radius clips everything inside the box, background images included, once overflow is set to hidden. Without that overflow rule, the box's outer edge rounds visually while a background image or child element can still show square corners underneath.

What Should You Do Right After a CSS Border Radius Generator Exports Your Code?

A CSS Border Radius Generator's job ends the moment it hands you a value. What happens next decides whether that number holds up inside a real design system or gets rewritten by the next person who touches the file.

Accepting the exported value without testing it against real content is a bad trade. You save a minute and get a corner that looks right in the tool's placeholder box and slightly off on an actual photo or button.

Three steps turn a generated number into something durable:

• Test the value against live content, not a placeholder shape
• Lock it into a design token instead of a bare number
• Record the corner order so the next edit doesn't invert it

Rounded corners rarely sit alone on a real interface. Pairing that radius with a box shadow generator is usually the next styling decision on the same card or button.