CSS Border Radius Generator

What CSS border-radius does

CSS border-radiusrounds the corners of any element's border box. Technically it clips the painted area using circular or elliptical arcs at each corner — the rest of the rendering (background, border, box-shadow) conforms to that shape. Designers, front-end engineers, and no-code builders rely on it constantly: card components, avatar frames, modal dialogs, input fields, pill-shaped badges, and icon containers all depend on rounded corners css to look the way they do.

Before border-radius became universal (IE9, 2011), achieving rounded corners required sliced images or nested elements. Today it is a single CSS property with near-zero rendering cost. Understanding its syntax fully — especially when to use percentages versus pixel values and how the four longhand properties interact — lets you match designs precisely and avoid common bugs.

The Deftkit CSS border radius generator lets you drag sliders for each corner individually, lock them to a uniform value, switch between px and %, preview the live shape, and copy the result as a standard CSS declaration or a Tailwind utility class. No signup, no server round trip, no installed software.

The border-radius syntax

The shorthand property accepts one, two, three, or four values, following the standard CSS corner order (top-left → top-right → bottom-right → bottom-left):

/* All four corners the same */
border-radius: 8px;

/* Top-left+bottom-right | top-right+bottom-left */
border-radius: 8px 16px;

/* Top-left | top-right+bottom-left | bottom-right */
border-radius: 8px 16px 4px;

/* Top-left | top-right | bottom-right | bottom-left */
border-radius: 8px 16px 8px 0;

The four longhand properties give you explicit control over individual corners:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Longhands are useful when you want to override a single corner after a shorthand rule, or when working in component CSS where the shorthand would reset the other three corners. As with most CSS shorthand vs longhand interactions, the rule that appears later in the cascade wins on a per-corner basis.

px vs %— pixel values produce a fixed arc regardless of how the element's size changes, making them the right choice for buttons, inputs, and cards where you want a consistent 8px or 12px chamfer. Percentage values are relative to the element's own dimensions: 50% on a square element produces a perfect circle, and 50% on a rectangular element produces an ellipse. Use 9999px (or a similarly large value) when you want a pill or stadium shape — it will always cap to the maximum arc regardless of element width.

How to use this tool

1. Adjust the sliders — four sliders control top-left, top-right, bottom-right, and bottom-left corner radii independently. The live preview updates on every drag.
2. Toggle the lock— enable the "lock all corners" toggle to keep all four values in sync while you adjust any single slider. Useful for symmetric shapes.
3. Choose your unit — switch between px and % using the unit toggle. The slider range adjusts accordingly (0–200 for px, 0–50 for %).
4. Use a preset — presets like Circle, Pill, Slight, Card, and Top Only load typical values in one click.
5. Copy the output— use "Copy CSS" to get the full border-radius: ...; declaration, or "Copy Tailwind" for the equivalent Tailwind utility class. Paste directly into your stylesheet or component.

Example: card, circle, and pill

Three patterns cover the majority of everyday use cases for border radius online:

/* Card component — uniform 12px */
border-radius: 12px;

/* Avatar circle — requires square dimensions */
width: 48px;
height: 48px;
border-radius: 50%;

/* Pill / badge — large value always caps to full arc */
border-radius: 9999px;

/* Asymmetric — only top corners rounded (e.g., a tab) */
border-radius: 8px 8px 0 0;

Tailwind equivalents for the same values:

<!-- Card -->
<div class="rounded-xl">...</div>          /* 12px */

<!-- Circle -->
<div class="rounded-full w-12 h-12">...</div>

<!-- Pill -->
<span class="rounded-full px-3 py-1">...</span>

<!-- Custom arbitrary value -->
<div class="rounded-[10px_10px_0_0]">...</div>

Tailwind border-radius scale

Tailwind ships a complete rounded-* utility scale. Knowing the underlying pixel values helps you choose the right class rather than guessing:

• rounded-sm — 2px
• rounded — 4px
• rounded-md — 6px
• rounded-lg — 8px
• rounded-xl — 12px
• rounded-2xl — 16px
• rounded-3xl — 24px
• rounded-full — 9999px (pill or circle)

Each utility also has corner-specific variants: rounded-tl-lg (top-left only), rounded-t-lg (top two corners), rounded-b-xl (bottom two), and so on. For values outside the scale, use the arbitrary-value syntax: rounded-[10px] or rounded-[50%]. The "Copy Tailwind" button in this border radius generator produces the correct class automatically, including arbitrary-value syntax when the value falls between named steps.

Technical notes: elliptical radii and browser support

CSS border-radius supports an elliptical syntax that lets you specify separate horizontal and vertical radii for each corner, separated by a slash:

/* x-radius / y-radius — makes an elliptical arc at each corner */
border-radius: 50px / 25px;

/* Per-corner elliptical radii */
border-radius: 80px 20px / 40px 10px;

This syntax is valid CSS and works in all modern browsers, but it is uncommon in practice — most UI shapes use symmetric arcs. This tool outputs the standard symmetric syntax. If you need the elliptical form, you can extend the generated value manually.

Browser support — border-radius has been universally supported since Internet Explorer 9 (2011). There are no meaningful cross-browser inconsistencies for normal usage. The css border radius property is safe to use without any fallbacks.

Common mistakes

• Using 50% on a non-square element and expecting a circle — border-radius: 50% on a 200px × 80px element gives an ellipse, not a circle. To guarantee a circle, enforce a square with aspect-ratio: 1 / 1 (or explicit equal width and height) before applying 50%.
• Forgetting overflow: hidden — rounded corners clip the border box, but child elements that extend to the edge will still paint outside the arc unless you add overflow: hidden. This trips up image cards and video thumbnails where the image bleeds through the corners.
• Using a large arbitrary px value instead of 9999px — any value equal to or larger than half the element's smallest dimension caps to the maximum arc. Writing 9999px is idiomatic for pills and always works, while a specific large value (say, 500px) may fail if the element grows beyond 1000px wide.
• Shorthand overwriting longhand — if you set border-radius: 8px after a specific border-top-left-radius: 0, the shorthand resets all four corners. Write longhands after the shorthand, not before.

Tool limits

This tool generates the standard symmetric border-radius shorthand. It does not expose the elliptical x/y split syntax (the slash form). Output is copy-paste only — there is no file download. For designs needing precise per-corner elliptical arcs, take the generated shorthand as a starting point and add the slash syntax manually in your CSS.

Related tools

Rounded corners are one piece of a component's visual style. You may also need:

• CSS Box Shadow Generator — add depth and elevation to the same element
• CSS Gradient Generator — fill the background with a linear, radial, or conic gradient
• CSS Clamp Calculator — generate fluid typography and spacing that scales with the viewport
• Color Converter — convert border and background colors between HEX, RGB, and HSL

Privacy

No data is sent to any server. Every value you drag, every unit you toggle, and every preset you apply runs entirely inside your browser. The CSS string is built locally and never leaves your device. Safe to use for unreleased product designs and internal design systems.

Frequently asked questions

How do I make a circle with CSS?

Set the element to equal width and height, then apply border-radius: 50%. The 50% resolves to exactly half the element's dimensions, producing a perfect circle. In Tailwind: w-12 h-12 rounded-full. If the element can change size dynamically, use aspect-ratio: 1 / 1 rather than hardcoding pixel dimensions, so the element stays square and the circle holds.

What is the difference between border-radius: 50% and border-radius: 9999px?

On a square element they produce visually identical results. The difference appears on rectangular elements: 50% produces an ellipse (the arc spans the full short axis), while 9999px caps each arc to half the shortest side, giving you a stadium or pill shape with flat sides in the middle. For buttons and badges, 9999px is usually what you want. For circular avatars and icons, 50% on a square element is correct.

Why is my border-radius not showing on an image?

The two most common causes: (1) The image is a child of a rounded container but the container lacks overflow: hidden — the container clips its own border box but the image still paints through the corner. Add overflow: hidden to the container, or apply border-radius directly to the <img> element itself. (2) The image has a non-transparent background that fills the corner. In that case, both the container and the image need rounded corners, or you need to clip the image with object-fit: cover inside a rounded wrapper.

How do I get the same result in Tailwind CSS?

Use the rounded-* scale for standard values: rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), or rounded-full (9999px). For values outside the scale, use the arbitrary-value syntax: rounded-[10px]. For per-corner control, prefix with the side shorthand: rounded-tl-lg (top-left), rounded-t-xl(top two corners). The "Copy Tailwind" button in this tool generates the correct class for you, including arbitrary values and per-corner classes.

Can I set different horizontal and vertical radii for one corner?

Yes — CSS supports elliptical corner radii using the slash syntax in the shorthand or two values in a longhand. For example, border-top-left-radius: 40px 20px gives a corner whose horizontal arc is 40px and vertical arc is 20px. In the shorthand, border-radius: 40px / 20px applies elliptical arcs to all four corners. This tool outputs the standard symmetric form; edit the generated value manually to add the slash if you need elliptical corners.

Does border-radius affect the clickable area of an element?

No. border-radius is purely a visual paint effect. The hit-testing area (where clicks and taps register) remains the full rectangular bounding box, including the clipped corner regions. This is rarely a problem for standard UI elements, but it is worth knowing for interactive elements with large radii (like a circular button) where users might click a visually empty corner and still trigger the action.