Border Radius Generator

Border Radius Generator

Visual border-radius generator for CSS. Create rounded corners, pills, organic shapes. Generate CSS border-radius code with live preview

`border-radius: 8px` is fine for buttons. The interesting cases are: `border-radius: 50%` for circles and pills (with a catch — only if the element is also a square); `border-radius: 8px 8px 0 0` for cards with rounded tops and flat bottoms; and the four-value-and-slash syntax for elliptical corners that gives that "squircle-ish" 2026 look. This generator covers all of them, including the per-corner controls and the new CSS `corner-shape` property (Safari 18.4+) that produces real superellipse curves like iOS.

Syntax forms and what each can express

  • One value: `border-radius: 12px` — all four corners equally rounded.
  • Two values: `border-radius: 12px 24px` — top-left + bottom-right, then top-right + bottom-left. Diagonal symmetry.
  • Four values: `border-radius: 8px 16px 24px 32px` — top-left, top-right, bottom-right, bottom-left (clockwise from top-left).
  • Slash syntax: `border-radius: 30px / 10px` — horizontal radius 30, vertical radius 10. Produces elliptical (squashed) corners.
  • Full elliptical: `border-radius: 30px 60px 30px 60px / 10px 20px 10px 20px` — eight values, every corner can have its own ellipse.
  • `border-radius: 50%` — half the element size. Square element becomes circle; rectangular becomes pill.

The "pill button" pattern and its gotcha

Input

A pill-shaped button — fully rounded ends, flat top and bottom

Output

.pill {
  border-radius: 9999px;
}

Why 9999px and not 50%?
  50% on a rectangular element makes the corners elliptical — at 200×40px, the
  corners curve from 100px wide to 20px tall, which makes the pill
  look stretched and ugly.

  9999px (or any large fixed value) caps at the natural pill radius (half the
  element height) without distorting. CSS clamps to the maximum that still
  produces a valid shape.

For circles specifically (where you ARE making a square element circular):
.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

50% works only when the element is exactly square. For dynamic widths (button with variable text), use a large fixed value (9999px is conventional) and let the browser clamp it.

Per-corner control for cards and tabs

  • Cards with rounded tops, flat bottoms — `border-radius: 12px 12px 0 0`. Common for cards that attach to a footer or have a sticky header below.
  • Tabs — only the top corners rounded. The tab container has matching radius to look continuous.
  • Quoted-message bubbles (Slack/iMessage style) — three corners rounded, one corner sharp toward the sender's side. `border-radius: 16px 16px 16px 0` for left-aligned bubbles.
  • Card collapse animations — animate `border-radius` from 16px to 0 to make a card "merge" into a container. Cheap visual trick that signals state change.

Squircles and the new corner-shape property

iOS app icons are not circular-arc rounded — they are superellipses (squircles). The curve approaches the corner more gradually than a quarter-circle, giving a softer, more organic look. CSS `border-radius` produces quarter-circles only.

The 2024 CSS spec adds `corner-shape: superellipse(<n>)` (Safari 18.4+, behind flag elsewhere). `corner-shape: superellipse(4)` produces an iOS-style squircle. Until widespread support, the workaround is SVG masks or `clip-path` with a polygon approximation — both have layout and accessibility downsides.

When to reach for this tool

  • You are designing a card component and want to compare different corner radii visually against your typography and spacing.
  • You are tuning a specific corner (e.g., the inside corner of a tab) and want a live preview without saving-and-refreshing.
  • You inherited a design system with inconsistent radii (8px here, 12px there, 16px elsewhere) and want to standardize.
  • You are recreating an iOS-style squircle in CSS and want to see how close you can get with the polyfill approach.

What this tool will not do

  • It will not produce perfect squircles in older browsers. corner-shape support is limited; the polyfill via clip-path or SVG mask has trade-offs (no shadow, no border, accessibility issues).
  • It will not handle border-radius interaction with `overflow: hidden`. A rounded element with overflow:hidden clips children to the rounded shape — sometimes desired (cropped images inside rounded cards), sometimes a bug (focus rings clipped).
  • It will not enforce design-system consistency. The tool generates values; if your team uses radii inconsistently across components, it is a discipline problem not a tool problem.

Frequently asked questions

Why does my child element's focus ring get clipped?

`overflow: hidden` on a rounded container clips everything inside it, including focus indicators. Either: (1) remove overflow:hidden from the parent (and find another way to clip child images); (2) put the focus indicator outside the rounded element (use `box-shadow: 0 0 0 2px <color>` on the focused element).

Can I animate border-radius?

Yes — CSS transitions and animations on border-radius work. The animation is on each corner's radius value. Common pattern: button hover shrinks radius slightly for "softer" interaction feedback. Be careful animating from 0 to a large radius on big elements — can be visually jarring.

What does `border-radius: 50% 25% 75% 10%` produce?

Asymmetric organic blobs. Each corner has a different curvature percentage. Useful for "blob" backgrounds and modern aesthetic shapes. The percentages are relative to the element's width (for x-radius) and height (for y-radius).

How do I make a triangle with border-radius?

You cannot — border-radius only rounds existing rectangular corners. For triangles use clip-path: `clip-path: polygon(50% 0, 100% 100%, 0 100%)`. To round a triangle's corners, use SVG with rounded-corner path commands.

My rounded corners look pixelated.

Two possibilities: (1) on low-DPR displays, small radii (1-3px) anti-alias to gray pixels visible at zoom. Use solid color and accept the limitation, or design for HiDPI; (2) `transform: scale()` on a rounded element rasterizes the curve, which can pixelate. Use `transform: scale()` only on elements that do not need crisp curves at the new size.

What is "border-radius: inherit" for?

Inherits the parent's border-radius. Useful when nested elements (a child inside a rounded card) need the SAME rounding as the parent — e.g., a header inside a card that should align with the card's top-left and top-right corners.

Related tools

CSS Box Shadow Generator

Create CSS box shadows visually with multiple layers. Adjust blur, spread, offset, color. Free online box-shadow CSS code generator

CSS Gradient Generator

Create beautiful linear, radial, conic CSS gradients visually. Copy CSS code instantly. Free online gradient maker with multiple color stops

CSS Flexbox Generator

Visual CSS Flexbox layout builder. Configure flex container and items with live preview. Generate flexbox code for responsive layouts. Free online flexbox playground

SVG Path Editor

Draw and edit SVG paths visually with Bezier curves. Create icons and shapes. Free online SVG path builder with code output

CSS Grid Generator

Visual CSS Grid layout builder. Define rows, columns, gaps with live preview. Generate grid-template code. Free online CSS Grid playground and code generator

Last updated · E-Utils editorial team