CSS Border Radius Generator

Rounded Corners, Pill Buttons, and Custom Shapes—Without the Guessing

The `border-radius` property is one of the most frequently used CSS properties in modern web design, and also one of the easiest to get subtly wrong when you're writing values manually. Should the card corner be 8px or 12px? Does the button look better at 6px or fully pill-shaped at 9999px? Is the avatar container still a perfect circle if the image dimensions change? Our free CSS border radius generator answers all of these questions visually, with a live preview that updates the moment you move a slider. Copy the generated CSS, paste it into your project, and you're done—no trial-and-error reloads required.

The tool gives you independent control over all four corners—top-left, top-right, bottom-right, and bottom-left—which is particularly useful for design patterns where asymmetric rounding creates distinctive shapes. A card with a flat top edge and rounded bottom corners, a tab component with rounded top corners only, or a speech bubble shape with one sharp corner all require per-corner control that the shorthand `border-radius: 10px` syntax doesn't give you.

How CSS Border Radius Works

The `border-radius` property rounds the corners of an element's border box. When all four corners share the same value, the shorthand is compact: `border-radius: 8px` applies 8px rounding to all corners equally. When corners differ, the four-value shorthand follows a clockwise order starting from the top-left: `border-radius: top-left top-right bottom-right bottom-left`. For example, `border-radius: 12px 12px 0 0` rounds only the top two corners—a common pattern for card headers and tab components.

Values can be expressed in pixels (absolute rounding), percentages (rounding relative to the element's dimensions), or em/rem units (rounding that scales with typography). Percentage values have an interesting behavior: at 50%, a square element becomes a perfect circle, because 50% of the element's width is applied to each horizontal corner dimension and 50% of the height to each vertical one. This is the standard technique for circular avatars and icon containers.

CSS also supports elliptical corners using the slash syntax: `border-radius: 30px / 15px` creates corners that are 30px wide and 15px tall—an oval rather than a circular arc. This level of detail becomes useful for organic, flowing shapes in more complex design systems, though for most UI components the simple pixel or percentage form is all you need.

Common Border Radius Patterns and When to Use Them

Subtle Rounding for Cards and Containers (4px–12px)

Cards, panels, tooltips, dropdown menus, and modal windows typically benefit from a modest rounding of 4px to 12px. This range softens the sharp right-angle corners that look harsh on light backgrounds while keeping the container recognizably rectangular. Popular design systems converge on this range: Google's Material Design uses 4dp for cards, Apple's iOS HIG uses 10–14pt, and Tailwind CSS's default card classes apply `rounded-lg` which translates to 8px. Values in this range are forgiving—differences of a few pixels are barely perceptible to most users, so precision matters less than consistency across components.

Pill Shapes for Tags and Badges (9999px or 50%)

Setting `border-radius: 9999px` on any element produces a fully pill-shaped result where the ends are semicircular regardless of how wide or tall the element is. This works because a radius larger than half the element's shortest dimension simply produces the maximum possible arc—a semicircle. Tags, status badges, skill labels, and "chip" filter components are almost universally styled this way in modern interfaces. The value 9999px has become a convention rather than a meaningful measurement—it guarantees full pill shaping without requiring you to know the element's dimensions ahead of time.

Perfect Circles for Avatars (50%)

Square elements with `border-radius: 50%` become perfect circles. This is the standard approach for user avatars, profile photos, and circular icon containers. The key requirement is that the element must have equal width and height—if the dimensions differ, 50% produces an ellipse rather than a circle. For avatar images specifically, set `overflow: hidden` on the container so the image is clipped to the circular boundary rather than overflowing it.

Asymmetric Rounding for Distinctive Components

Design systems that want to establish a recognizable visual personality sometimes use asymmetric border radii as a signature element—a specific combination of sharp and rounded corners that becomes part of the brand's visual identity. Speech bubbles typically have one sharp corner pointing toward the speaker. Certain tab designs are rounded on top and square on the bottom where they connect to the content area. Floating action buttons sometimes use asymmetric radii to create a distinctive non-standard shape. Our per-corner sliders make it straightforward to explore and fine-tune these asymmetric configurations.

The border-radius Property Across Browsers

`border-radius` has been universally supported across all major browsers since Internet Explorer 9, meaning no vendor prefixes (`-webkit-border-radius`, `-moz-border-radius`) are required for any contemporary project. The generated CSS from our tool uses the clean, unprefixed standard syntax that is universally compatible with all browsers your users are likely to be using. If you're maintaining a legacy codebase that still supports very old IE versions, the prefixed forms can be added manually—but for any project targeting modern browsers, the standard syntax works everywhere.

Free, Private, and Instant

The border radius generator runs entirely within your browser. No design configuration or styling data you work with is transmitted to any server or stored anywhere. The tool is completely free with no account or registration required. Adjust the sliders until the preview looks exactly right, then copy the CSS and use it—the whole process takes under a minute for any component.