How It Works

The border-radius property controls the curvature of an element’s corners. CSS supports shorthand values (one to four values) and an “elliptical” syntax (horizontal and vertical radii separated by a slash). This generator lets you choose a unit, link corners for fast editing, or unlock every corner for precise control.

Step-by-step workflow

• 1) Choose a unit: Pick px for predictable pixel rounding or % for responsive rounding relative to element size.
• 2) Set corner values: Use linked mode to keep all corners identical, or adjust each corner individually for custom shapes.
• 3) Optional elliptical mode: Turn on elliptical radii to control horizontal and vertical curvature separately.
• 4) Preview and export: The preview updates as you edit. Copy the CSS or download it as a file for reuse.

Key Features

Linked corners for speed

When you want consistent rounding, linked mode keeps all corners synchronized. Adjust a single control and instantly generate a single-value shorthand like border-radius: 12px;.

Independent corner controls

Unlink corners to fine-tune each radius. The generator outputs a four-value shorthand in the correct order: top-left, top-right, bottom-right, bottom-left—matching how designers describe a shape visually.

Elliptical border-radius support

Some shapes need different curvature horizontally versus vertically—think squircle-like cards, asymmetric badges, or rounded rectangles that should look softer on one axis. Elliptical mode outputs the slash syntax, such as border-radius: 24px 24px 12px 12px / 16px 16px 10px 10px;.

Copy and download

Export is instant. Copy to clipboard for quick pasting into a CSS file, or download the code as a small .css snippet to keep alongside a component library.

Clean output for component libraries

The generated CSS is minimal by default, and you can optionally add a short comment label so the snippet is easy to recognize when you store it in a design system or style guide.

Use Cases

• Buttons and pills: Create consistent rounding across primary, secondary, and icon buttons. Use high radii or percentage values for fully pill-shaped components.
• Cards and surfaces: Match your brand style by standardizing card radius values (e.g., 12px, 16px, or 20px) across dashboards and landing pages.
• Inputs and form controls: Keep text inputs and dropdowns visually aligned with your overall design language.
• Avatars and thumbnails: Use 50% to create circles, or partial rounding for soft-edged thumbnails.
• Badges and tags: Create asymmetric shapes for special states—like a tag with a more rounded left side to match an icon.
• Neumorphic or soft UI: Subtle corner rounding combined with shadows can dramatically change perceived depth and tactility.
• Responsive design: Percentage radii help components scale with container size while keeping a consistent “feel” on different screens.

In short: whenever you’re iterating on UI polish, border-radius is a small change that can have a huge impact on perceived quality.

Understanding Border Radius in Real Projects

In a component-driven codebase, small visual decisions compound. A single inconsistent radius value can make a UI feel “off” even when spacing and typography are solid. Teams often standardize radius tokens the same way they standardize colors and spacing. For example, you might define --radius-sm, --radius-md, and --radius-lg and apply them across buttons, inputs, cards, and modals.

This generator supports that workflow by making it easy to prototype a token set. Try a few values, compare how they look on different element sizes, and then export the CSS you want to keep. Because it also supports four-value shorthand and elliptical syntax, you can design more nuanced shapes without memorizing the full grammar.

If you work with design tools like Figma or Sketch, you may already think in “corner radius” numbers. The final step is translating those values into CSS that is correct and consistent. This tool is a fast bridge between the design intent and the code that ships.

Practical Examples

Example: consistent card rounding

Many modern dashboards use a medium radius (often 12–20px) for cards. Using a single value keeps the design cohesive. If you want a card that feels softer without looking bubbly, start around 16px in pixels and adjust from there.

Example: “pill” button

Pill buttons can be created with a very large pixel radius (e.g., 999px) or with a percentage. For a standard button height, a large pixel radius is predictable. Use the preview to confirm the ends are fully rounded.

Example: asymmetric label

Sometimes you want a label that attaches to an icon on the left. Make the left corners more rounded than the right to create a clear visual entry point. Unlink corners and set top-left and bottom-left higher than the right-side values.

Example: elliptical “soft rectangle”

Elliptical radii can reduce the “squareness” of a container without overly curving the vertical edges. This is useful for hero callouts, panels, or mobile containers where the same radius value looks too sharp in one direction.

More Optimization Tips

Keep radii proportional to size

A 20px radius can look great on a 300px-wide card, but it may look exaggerated on a tiny icon button. If your product has multiple density modes, consider mapping radius tokens to component size so smaller components use smaller radii.

Pair radius with spacing and shadow

Rounded corners often look best when spacing is generous and shadows are subtle. If a shape feels “heavy,” try reducing the radius slightly or softening the shadow spread. The preview makes it easy to judge the curvature before you tweak other effects.

Remember overflow behavior

If you apply border-radius to a container that holds an image or a colored background, you may need overflow: hidden to clip inner content to the rounded shape. This is common for thumbnails, card media headers, and embedded iframes.

Optimization Tips

Prefer a small token set

If you’re building a product UI, choose a limited set of radius tokens (for example 4px, 8px, 12px, 16px). This reduces visual noise and makes components look like they belong together. This tool makes it easy to test those tokens quickly against your component shapes.

Use percentage wisely

Percent values are relative to the element’s box. A 50% radius is a common trick for perfect circles on square elements, but it can produce unexpected results on rectangles. For pill buttons, try a large pixel value or a high percentage and confirm the preview matches your intent.

Elliptical radii for refined shapes

When a shape looks “too sharp” in one direction, elliptical radii can soften it. This is especially helpful for cards and surfaces where you want a smoother vertical curve while keeping horizontal edges visually stable.