CSS Border-Radius Generator

Visually adjust rounded corners with live preview and CSS code to copy.

Vertical radii:

px
px 
{{ cssOutput }}

What is border-radius?

The CSS property border-radius rounds the corners of an element. You can set a uniform radius for all four corners or style each corner individually. The shorthand follows the order: top-left, top-right, bottom-right, bottom-left.

Elliptical Border Radii

With the extended syntax border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 you can define a horizontal and vertical radius for each corner. This creates elliptical curves that produce more organic shapes.

Common Use Cases

  • Circles: border-radius: 50% on a square element.
  • Pill shape: border-radius: 9999px for rounded buttons.
  • Cards: border-radius: 8px to 16px for modern card designs.
  • Blob shapes: Different horizontal and vertical radii for organic shapes.

border-radius: the full specification

The border-radius property is defined in CSS Backgrounds and Borders Module Level 3 and accepts one to four length values, plus an optional second set after a slash. The shorthand border-radius: 8px; is equivalent to border-radius: 8px 8px 8px 8px; and applies clockwise starting top-left. Values can be px, %, em, rem, or vw — percentages refer to the box's width (horizontal) or height (vertical). Negative values are invalid and clamped to 0.

Elliptical corners need the slash syntax: border-radius: 50px 20px / 30px 10px; means horizontal radius 50 px for TL/BR and 20 px for TR/BL, vertical radius 30 px for TL/BR and 10 px for TR/BL. This notation comes from SVG, where each corner carries its own ellipse half-axis. It produces droplet or blob shapes without SVG, purely in CSS — perfect for hero sections and onboarding illustrations.

border-radius interacts with other properties: outlines now follow the rounding in modern Chromium and Firefox (older versions clipped). overflow: hidden is mandatory if child elements should respect the rounding — otherwise images or backgrounds stick out. With very large values (>= 50% of the shorter side) you get a pill or circle. Browsers also accept border-radius: 9999px as a common pill idiom because the value is clamped to the maximum sensible size internally.

How to use the generator effectively

A few tricks help you get from design concept to production CSS in 30 seconds.

  1. First enable Link Corners and find your base radius. 8 px feels serious (banking), 16 px modern (SaaS), 24 px playful (consumer apps). Your whole design system should use only two or three stepped values, no more.
  2. Disable linking when you need asymmetric effects — e.g. only the top corners of a bottom sheet or a speech-bubble tail.
  3. Try elliptical radii for hero images. A combination like border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; produces an organic blob shape popular in marketing designs.
  4. Use the presets as a springboard — Uniform 8 matches Bootstrap defaults, Uniform 16 matches Material 3, Circle/Pill is 200 px (or larger than half the box). Click and adapt.
  5. Copy the snippet and replace hardcoded pixel values with custom properties like var(--radius-md). This keeps your design system consistent.

Concrete border-radius examples

These snippets cover the most important UI patterns.

  • Card: border-radius: 12px; is the clean default for Bootstrap / Material cards.
  • Pill button: border-radius: 9999px; fully rounds — perfect for CTAs and tag chips.
  • Avatar circle: width: 48px; height: 48px; border-radius: 50%; — only with a square box does 50% yield an exact circle.
  • Speech bubble: border-radius: 16px 16px 16px 0; produces a rounded bubble pointing to the bottom-left.
  • Organic blob: border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; — popular in modern hero sections and decorative elements.

Limits and performance

border-radius itself is GPU-accelerated in modern browsers and costs effectively zero render time. Things change once you combine rounded corners with overflow: hidden containing animated content or filter effects — the compositor then has to apply a mask, which can cause frame drops on older mobile devices. Also avoid border-radius on position: fixed elements combined with backdrop-filter: blur(); that is often glitchy on Safari. When printing, some browser print stylesheets ignore border-radius — if your layout is meant to print, test explicitly. Very small radii (1–2 px) often render fuzzy on high-DPI displays because anti-aliasing lacks pixels — either drop them or use at least 4 px. Finally: WCAG doesn't require any specific radius, but heavily rounded buttons must still offer a clear hit target (at least 24x24 CSS pixels).

Frequently asked border-radius questions

How does border-radius differ from clip-path?
border-radius only rounds the four corners of a rectangular box and respects background, border, and outline. clip-path cuts arbitrary polygons or curves and ignores the border. For pure rounding border-radius is more performant and accessibility-friendly (outlines follow along).
Why do images stay sharp-edged despite border-radius?
If the image is an img element, border-radius must be set directly on the image or on its container with overflow: hidden. For background-image, border-radius on the container is enough.
What is the difference between 50% and 9999px?
50% rounds relative to the box — a 200x100 box becomes an ellipse, a square becomes a circle. 9999px is absolute and clamped internally to 50% of the shorter side — rectangular boxes become pills, squares become circles. 9999px is more robust when box dimensions change.
Does border-radius work on tables?
Yes on table, but inner td/th ignore it with border-collapse: collapse. Set border-collapse: separate; border-spacing: 0; or round the container instead of the table itself.
Can I animate border-radius?
Yes, border-radius is animatable. transition: border-radius 200ms ease; works for hover effects. For complex blob morphs between different percentage values a simple keyframe animation suffices; CSS interpolates lengths directly.
Which radius fits dark mode?
Dark mode often benefits from slightly larger radii (12–20 px) because dark surfaces with soft corners reinforce the AMOLED look. Light mode tends to feel more serious with smaller radii (4–12 px). Still, stay within your token set rather than switching between modes.

Related tools