CSS Border Radius Generator

Controls

Link all corners

Corner Diagram

Presets

Preview

Background:

Content:

CSS Output

Include -webkit- prefix

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 CSS Border Radius

CSS border radius is the border-radius property in CSS that rounds the corners of an HTML element's border box.

It is a shorthand property, meaning a single declaration controls all four corners at once - or each corner individually when needed.

You will see it everywhere in modern user interface design: cards, buttons, avatars, modals, input fields, badges.

How the CSS Border Radius Generator Works

Type in your values, drag the sliders, and the tool outputs ready-to-copy CSS code instantly.

No manual calculation. No syntax guessing. Just paste the result into your stylesheet.

What the Generator Takes as Input

Corner type: uniform radius (all four corners equal) or individual per corner
Value format: px, %, em, rem
Horizontal and vertical radius per corner (for the full 8-value syntax)

What the Generator Outputs

The tool produces three output types depending on your settings:

Shorthand border-radius declaration (e.g., border-radius: 12px 24px 12px 24px)
Individual longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
Slash-notation output for elliptical corners (e.g., border-radius: 50px / 25px)

The live preview updates as you adjust values, so what you see in the tool is exactly what renders in the browser.

CSS Border Radius Values

The border-radius property accepts one to four values - and optionally a second set after a slash for elliptical corners.

Understanding what each syntax does is worth the five minutes it takes.

Single Value

border-radius: 12px applies the same 12px circular radius to all four corners.

The most common usage. Works on buttons, cards, images, any block-level element.

Two Values

border-radius: 10px 20px - first value sets top-left and bottom-right, second sets top-right and bottom-left.

Diagonal pairs share a value.

Three Values

border-radius: 10px 20px 30px - top-left gets the first value, top-right and bottom-left share the second, bottom-right gets the third.

Rarely used, but valid.

Four Values

border-radius: 10px 20px 30px 40px goes clockwise: top-left, top-right, bottom-right, bottom-left.

This is the syntax you want for full asymmetric corner radius control.

Eight Values (Advanced Slash Syntax)

border-radius: 50px 40px 30px 20px / 25px 20px 15px 10px - values before the slash set the horizontal radius per corner, values after set the vertical radius.

This creates elliptical corners instead of circular ones.

Useful for organic shapes, flowing card designs, and blob-style elements.

CSS Border Radius Units

Pixels and percentages behave differently. Choosing the wrong unit for the context is a common mistake.

px vs. %

px gives a fixed curve regardless of element size - a 10px radius stays 10px on a 50px button and a 500px card.

% scales relative to the element's dimensions. border-radius: 50% on a square element produces a perfect circle; on a rectangle, it produces an ellipse.

em and rem

em scales with the element's own font size; rem scales with the root font size.

Both are useful for responsive design systems where spacing and sizing scale with typography.

When to Use Percentages

Use % when the element's size changes across breakpoints and you want the corner curve to scale with it.

Use px when you need consistent rounding across differently-sized elements - like keeping all buttons at exactly 8px regardless of button width.

border-radius: 50% is the standard approach for circular avatars and icon containers.

CSS Border Radius Shapes You Can Build

Most people stop at rounded corners. The property goes further.

Circle

Set equal width and height on any element, then apply border-radius: 50%.

Works for profile pictures, icon backgrounds, decorative dots.

Pill Shape

border-radius: 9999px on a rectangular element. The browser caps the radius at the maximum possible, producing fully rounded ends.

Standard pattern for tags, badges, and CSS buttons.

Squircle

A squircle sits between a square and a circle - softer than a square, less circular than 50%.

Achieved with values around border-radius: 30% or through the 8-value elliptical syntax. Common in app icon design.

Asymmetric Shape

Different radius values per corner. Think rounded top, sharp bottom - used for card headers, tabs, banner elements.

border-radius: 20px 20px 0 0 rounds only the top two corners.

Organic or Blob Shape

Full 8-value slash syntax with large, uneven values per corner.

Produces fluid, asymmetric shapes used in decorative backgrounds, section dividers, and illustration-heavy layouts. Pair with CSS gradient generator fills for polished results.

Individual Corner Properties

When you need to target one corner without touching the others, use the longhand properties directly.

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Each accepts one value (circular) or two values separated by a space (elliptical).

Longhand is also useful when overriding a shorthand declaration in a specific breakpoint or state.

CSS Border Radius and overflow

border-radius clips the element's background and border - but child elements can still bleed past the rounded corners.

Add overflow: hidden to the parent to clip child content to the rounded shape.

Without it, images inside a rounded div, for instance, will ignore the corner curve entirely.

CSS Border Radius in Responsive Design

Corner radius doesn't automatically adapt to screen size unless you use relative units or media queries.

Fixed px Radius on Small Screens

A border-radius: 24px on a large desktop card can look oversized on a 320px mobile screen.

Use media queries to reduce the radius at smaller viewport widths, or switch to percentage-based values that scale with the element.

Percentage-Based Radius for Scalable Corners

% values scale automatically as the element resizes across breakpoints.

Works well for containers with fluid widths - the corner curve stays proportional without any extra CSS.

CSS Border Radius and CSS Transitions

border-radius is an animatable property.

The browser interpolates between the start and end radius values smoothly, including complex multi-value and slash-syntax declarations.

Hover Transition

.button {
  border-radius: 4px;
  transition: border-radius 0.3s ease;
}

.button:hover {
  border-radius: 20px;
}

Pair with other transitioning properties - background, box-shadow - for polished micro-interactions on buttons and cards.

CSS Animation

You can animate border-radius through a full CSS keyframe sequence using @keyframes, cycling between sharp and rounded states.

Common use: morphing blob shapes, pulsing avatar borders, loading state indicators.

Browser Support for border-radius

border-radius has full support across all modern browsers: Chrome, Firefox, Safari, Edge, and Opera.

Cross-browser compatibility is not a concern for standard usage - the property has been universally supported since 2012.

The corner-shape property (for bevel, notch, squircle effects) is newer and has limited support as of 2025. Check MDN Web Docs before using it in production.

Common CSS Border Radius Mistakes

Forgetting overflow: hidden

Rounded corners on a container won't clip child images or backgrounds without overflow: hidden.

The most common complaint: "my border-radius isn't working on images." It's almost always this.

Using 50% on Non-Square Elements

border-radius: 50% on a rectangle produces an ellipse, not a circle.

To get a circle, the element needs equal width and height first.

Not Using Slash Syntax for Elliptical Corners

Circular corners look fine for most UI elements.

But if you want a corner that curves more horizontally than vertically - or need an organic shape - the slash syntax (border-radius: 40px / 20px) is the only way to get there. The generator handles this automatically.

Related CSS Generator Tools

If you're already working on element styling, these tools cover the next most common properties:

CSS Box Shadow Generator - depth and elevation for cards, modals, buttons
CSS text shadow generator - heading and display text effects
CSS Triangle Generator - pure CSS triangles for tooltips, arrows, decorative shapes
CSS clip-path Generator - custom polygon and path clipping for sections and images
CSS glassmorphism generator - frosted glass UI effects
CSS Animation Generator - keyframe animation code without writing it manually
CSS Loader Generator - spinner and loading indicator styles

FAQ on CSS Border Radius Generators

What does a CSS border radius generator do?

It outputs ready-to-copy border-radius CSS code based on values you set visually.

You adjust corner inputs, see a live preview, and copy the generated code directly into your stylesheet. No manual syntax writing needed.

What is the border-radius shorthand syntax?

border-radius accepts one to four values going clockwise: top-left, top-right, bottom-right, bottom-left.

A single value like border-radius: 12px applies to all four corners equally. Four values give you full asymmetric corner radius control.

What units can I use for border-radius?

px, %, em, and rem all work.

Pixels give fixed corner curves; percentages scale with element size. border-radius: 50% on a square element produces a circle.

What is the slash syntax in border-radius?

The slash separates horizontal and vertical radius values per corner.

border-radius: 50px / 25px creates elliptical corners - wider than they are tall. Useful for organic shapes and flowing card designs that go beyond standard circular rounding.

How do I make a circle with border-radius?

Give the element equal width and height, then set border-radius: 50%.

If the dimensions don't match, you get an ellipse instead. This is the standard approach for circular avatars and icon containers.

Why isn't my border-radius clipping child elements?

Missing overflow: hidden on the parent. Border-radius clips the element's own background but not child content.

Add overflow: hidden to force child images and backgrounds to respect the rounded corners.

Can I animate border-radius?

Yes. It's a fully animatable CSS property.

Use transition: border-radius 0.3s ease for hover effects, or build a @keyframes sequence to morph shapes continuously. The browser interpolates between values smoothly.

What is the difference between border-radius and individual corner properties?

border-radius is the shorthand. The longhand properties - border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius - target one corner at a time.

Use longhand when overriding a single corner in a specific state or breakpoint.

Does border-radius affect layout or clickable area?

No. It only clips the visual appearance - background, border, and overflow content.

The element's box model stays unchanged. Padding, margin, and the clickable hit area remain rectangular unless you also apply clip-path.

What is the browser support for border-radius?

Full support across all modern browsers: Chrome, Firefox, Safari, Edge, and Opera.

Cross-browser compatibility is not a concern for standard usage. The property has been universally supported since 2012, so no vendor prefixes are needed.