Border Radius Generator

Border Radius Generator: The Complete Guide to CSS border-radius, Rounded Corners, and Shape Design

The CSS border-radius property is one of the most transformative and widely used properties in modern web design. It allows you to round the corners of any HTML element, transforming sharp rectangles into friendly rounded cards, pill-shaped buttons, perfect circles, ellipses, and complex organic shapes. Before CSS3 introduced border-radius in 2010, achieving rounded corners required JavaScript hacks, multiple overlapping image slices, or proprietary browser-specific implementations. Today, a single line of CSS can create rounded shapes that were previously a significant development effort.

Understanding border-radius at a deep level — beyond just setting a simple pixel value — unlocks a remarkable range of design possibilities. The property supports up to eight individual values controlling the horizontal and vertical radii of each corner independently, enabling everything from asymmetric rounded cards to leaf shapes, speech bubbles, and abstract organic forms without any SVG or image assets.

The Complete border-radius Syntax

The border-radius shorthand property controls all four corners simultaneously, but its full syntax is more nuanced than most developers realize.

Single Value: Uniform Corners

.element { border-radius: 8px; }
/* All four corners: 8px horizontal and vertical radius */

The simplest form applies the same radius to all four corners. This is the most common usage for cards, buttons, and containers. Common values:

• 4px — subtle rounding, modern UI style
• 8px — standard card rounding (used by Tailwind's rounded-lg)
• 12px — pronounced rounding, friendly appearance
• 16px — very rounded, mobile-friendly
• 50% — circle/ellipse (when applied to a square element, creates a perfect circle)
• 9999px — pill shape (extremely large value forces maximum rounding — useful for variable-width elements where 50% creates an ellipse rather than pill)

Two Values: Horizontal Pair / Vertical Pair

.element { border-radius: 10px 20px; }
/* top-left & bottom-right: 10px
   top-right & bottom-left: 20px */

With two values, the first applies to the top-left and bottom-right corners (the "main diagonal"), and the second applies to the top-right and bottom-left corners (the "anti-diagonal"). This creates a subtle asymmetric effect useful for giving a design a slight dynamic lean.

Three Values

.element { border-radius: 10px 20px 30px; }
/* top-left: 10px
   top-right & bottom-left: 20px
   bottom-right: 30px */

Four Values: Individual Corners

.element { border-radius: 10px 20px 30px 40px; }
/* top-left: 10px, top-right: 20px, bottom-right: 30px, bottom-left: 40px */
/* Order: clockwise from top-left */

With four values, each corner gets its own radius applied clockwise starting from the top-left. This is the format a border-radius generator typically uses when you need precise per-corner control.

The Slash: Elliptical Corners

The most powerful and least-known aspect of border-radius is the slash separator, which lets you specify independent horizontal and vertical radii for each corner. Before the slash are the horizontal radii; after the slash are the vertical radii:

.element { border-radius: 50% / 20%; }
/* Horizontal radius: 50%, Vertical radius: 20%
   Creates a wide, flat oval pill shape */

.element { border-radius: 40px 0 40px 0 / 0 40px 0 40px; }
/* Creates a leaf/wave shape with alternating
   horizontal and vertical corner rounding */

With the slash syntax, you can have up to 8 values — 4 horizontal radii and 4 vertical radii — giving completely independent control over every aspect of every corner's curvature.

Longhand Properties

CSS also provides individual corner properties:

border-top-left-radius: 10px 20px;     /* horizontal vertical */
border-top-right-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;

Each longhand property accepts two values: the horizontal radius and the vertical radius. These are most useful for targeting individual corners via JavaScript or when specificity conflicts with the shorthand require individual overrides.

Units for border-radius

border-radius accepts all CSS length units plus percentages:

• px: Absolute pixels — most common for UI elements. Predictable across sizes.
• %: Percentage of the element's dimensions. On a square, 50% creates a circle. On a rectangle, 50% creates an ellipse. Scales with element size.
• em: Relative to the element's font size. Good for buttons where rounding should scale with text size.
• rem: Relative to the root font size. Consistent across the component.
• vw/vh: Percentage of viewport width/height. Creates viewport-responsive rounding.

Percentages are applied differently to horizontal and vertical radii: the horizontal radius percentage refers to the element's width, and the vertical radius percentage refers to the element's height. This is why 50% creates a circle on a square element but an ellipse on a non-square element.

Creating Common Shapes with border-radius

Perfect Circle

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
/* Element must have equal width and height */

Pill / Capsule Shape

.pill {
  border-radius: 9999px;  /* or 100px, any very large value */
}
/* Works on any width/height - sides become perfectly semicircular */

Using 9999px (or any very large value) rather than 50% for pills is important: 50% on a wide element creates a pointy oval ends, while a very large px value creates proper semicircular ends on any element size.

Leaf Shape

.leaf {
  border-radius: 0 50% 0 50%;
}
/* Rounds top-right and bottom-left, leaving top-left
   and bottom-right sharp — creates a diamond-rotated leaf */

Speech Bubble (with CSS only)

.bubble {
  border-radius: 20px;
  position: relative;
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border: 10px solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
}

Squircle (iOS-style app icon shape)

The squircle — the rounded square shape used for iOS app icons — is not achievable with CSS border-radius alone. iOS uses a superellipse formula for its icon corners. However, a close approximation (often called "squircle" loosely) uses a large percentage value:

.squircle-approx {
  border-radius: 22%;  /* Approximates iOS squircle */
}

/* For a true squircle, use CSS clip-path with SVG path:
   clip-path: path('M 0,50 C 0,0 0,0 50,0 S 100,0 100,50 100,100 50,100 0,100 0,50'); */

Organic/Blob Shapes

Highly asymmetric border-radius values with the slash syntax create organic blob shapes popular in modern illustration-influenced web design:

.blob {
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  /* Or animated: */
  animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  50% { border-radius: 70% 30% 50% 50% / 50% 40% 60% 40%; }
}

Border Radius in Modern Design Systems

Tailwind CSS Border Radius Scale

Tailwind CSS provides a comprehensive rounded utility scale:

• rounded-none: 0px
• rounded-sm: 2px
• rounded: 4px
• rounded-md: 6px
• rounded-lg: 8px
• rounded-xl: 12px
• rounded-2xl: 16px
• rounded-3xl: 24px
• rounded-full: 9999px (pill/circle)

For individual corners: rounded-t-lg (top), rounded-r-lg (right), rounded-b-lg (bottom), rounded-l-lg (left). For specific corners: rounded-tl-lg, rounded-tr-lg, rounded-br-lg, rounded-bl-lg.

Material Design

Google's Material Design 3 (Material You) defines a shape system using corner rounding as a key design expression. The shape scale ranges from Extra Small (4dp) to Extra Large (28dp), with Full (circular/pill) as the maximum. Different component types have recommended shape styles: buttons use rounded corners, cards use rounded corners, dialogs use large rounded corners, FABs use large rounded corners or circular.

Apple HIG (Human Interface Guidelines)

Apple's design language uses generous corner rounding throughout — macOS window corners, iOS app icons (squircle), buttons, and cards all feature prominent rounding. Apple's design philosophy uses corner radius as a key signal of "softness" and friendliness. The iOS dynamic island uses a continuous curve (matching the display's corner curves) — a sophisticated application of matching radii between hardware and software.

Border Radius and Performance

CSS border-radius is one of the most GPU-friendly CSS properties. Modern browsers use GPU compositing to render rounded corners, making even complex border-radius values essentially free in terms of rendering performance. The property triggers compositing but does not require repaints when the element itself doesn't change — the GPU handles the corner clipping.

The one performance consideration: border-radius clips the element's visual rendering, including overflow content. If a child element overflows, it will be clipped to the rounded shape. This clipping can sometimes trigger unintended layer promotions in complex layouts. Use overflow: hidden explicitly rather than relying on border-radius clipping for content containment.

Border Radius in Design Trends

The Neumorphism Trend

Neumorphism (2020) was a design trend combining subtle border-radius, soft shadows, and background color matching to create "extruded" UI elements that appeared pushed out of or into the background. It heavily relied on generous border-radius values (typically 15–20px) combined with dual box-shadows (one light, one dark) to achieve the soft 3D appearance.

Glassmorphism

Glassmorphism (2021) combined border-radius with backdrop-filter: blur(), semi-transparent backgrounds, and subtle borders to create a frosted glass effect. Rounded corners are essential to the aesthetic — sharp corners would break the soft, translucent quality of the design.

Blobby/Organic UI

Contemporary web design (2022–present) frequently uses highly asymmetric border-radius values (blobs) as decorative background elements, hero section shapes, and accent shapes. Animated blob shapes using CSS keyframes and asymmetric border-radius have become particularly popular in SaaS landing pages and portfolio sites.

Accessibility Considerations

Border-radius has no direct accessibility implications — it's purely cosmetic. However, some considerations arise:

• Rounded shapes can sometimes make it harder to perceive the exact clickable area of an element — ensure visual affordance (color, border, shadow) clearly communicates interactivity regardless of corner shape
• Very highly rounded shapes (approaching circles) on interactive elements may confuse users about their clickable dimensions
• Ensure sufficient contrast between rounded elements and their backgrounds, as corner curves may reduce perceived contrast in small elements

Browser Compatibility

CSS border-radius has universal browser support — all modern browsers (Chrome, Firefox, Safari, Edge) support the complete specification including elliptical radii (slash syntax), percentages, and all length units. The property is safe to use without any vendor prefixes or fallbacks. Historical vendor prefixes (-webkit-border-radius, -moz-border-radius) are no longer needed for any browser released after 2012.

CSS Custom Properties for Consistent Border Radius

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-card: var(--radius-lg);
  --radius-button: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-badge: var(--radius-full);
  --radius-avatar: var(--radius-full);
}

.card { border-radius: var(--radius-card); }
.btn { border-radius: var(--radius-button); }
.input { border-radius: var(--radius-input); }

Defining border-radius values as CSS custom properties creates a consistent shape system across your application and enables easy global updates — change the --radius-card value in one place and all cards update simultaneously.