Border Radius जनरेटर

Understanding the border-radius Shorthand

The CSS border-radius property is defined in the W3C CSS Backgrounds and Borders Module Level 3. Its shorthand accepts up to four values for circular corners and up to eight (separated by a slash) for elliptical corners. The corner order is fixed: top-left, top-right, bottom-right, bottom-left, clockwise from the top-left, exactly the way you'd read a clock face. The spec is unambiguous: "If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left."

The four per-corner longhands let you target a single corner without writing the others: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Each accepts one value (a circular corner) or two values (an elliptical x y).

Pixels, Percentages, and the 50% Trick

The W3C spec defines how percentages resolve: "Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box." This produces an important consequence: border-radius: 50% creates a perfect circle only when the element is square. On a 200×100 rectangle, 50% on every corner produces an ellipse: 100px horizontal radius (half the width) and 50px vertical radius (half the height).

When to reach for which unit:

• Pixels (px): Precise, fixed corners that don't scale with the element. Best for buttons, cards, and consistent UI components.
• Percentages (%): Scale with the element. Use 50% for circles or ellipses on shape-shifting components.
• em / rem: Scale with font size. Useful for buttons whose corner radius should grow with the text inside them.
• calc(): Mix units, e.g. calc(8px + 0.5em) for a base that scales subtly with text size.

The Pill Trick

Setting a border-radius bigger than half the element's shortest side clamps each corner to a true semicircle, producing a pill shape regardless of width. The convention is border-radius: 9999px, any number large enough that no realistic element will ever exceed it. This is why Bootstrap's .rounded-pill uses 50rem (~800px) and Tailwind v4's rounded-full resolves to calc(infinity * 1px): both encode the same idea, that a number bigger than the box guarantees a pill on any element.

Elliptical Corners and Organic Blob Shapes

The eight-value (slashed) form is what designers use to create organic, asymmetric "blob" shapes that have become popular for hero illustrations and decorative backgrounds. Each corner gets a different horizontal radius before the slash and a different vertical radius after, producing curves that aren't constrained to circular arcs.

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Logical-Property Variants for RTL Layouts

The CSS Logical Properties Module Level 1 introduces four logical longhands that adapt to writing direction:

• border-start-start-radius: top-left in LTR English, top-right in RTL Arabic / Hebrew.
• border-start-end-radius: top-right in LTR, top-left in RTL.
• border-end-start-radius: bottom-left in LTR, bottom-right in RTL.
• border-end-end-radius: bottom-right in LTR, bottom-left in RTL.

Useful when the same component must look symmetric in both reading directions: a chat bubble's "mouth" corner, for example, should always be on the side of the speaker, not always on the left. Note that there is no logical-property shorthand yet, so you have to write all four longhands separately to opt into RTL-aware corners.

Outer vs Inner Edge When the Border Is Thick

The radius applies to the outer edge of the border. The browser automatically computes a smaller, concentric radius for the inner edge so the border doesn't appear discontinuous at the corner. Practical consequence: a 16px outer radius with a 2px border will have an inner radius around 14px, so the border looks like a frame of constant thickness all the way around. Set background-clip: padding-box if you want the background colour to stop at the inner edge of the border instead of bleeding under it.

Practical Sizing Conventions

Common Mistakes

1. Using 50% on a non-square element and expecting a circle. 50% on a rectangle is an ellipse. Either keep the element square or use border-radius: 9999px for a true pill.
2. Forgetting the corner order. The shorthand is clockwise from top-left (TL TR BR BL). The two-value form sets diagonally opposite pairs, which is easy to misremember.
3. Negative values. The spec defines them as invalid; the browser silently clamps to zero. If a corner isn't rounding the way you expect, check that you didn't accidentally subtract.
4. Rounded parents leaking children. An element with border-radius doesn't clip its descendants by default. Add overflow: hidden on the parent if you want children to stop at the rounded edge.
5. Per-corner properties before the shorthand. CSS cascade is order-sensitive, so border-top-left-radius followed by border-radius overwrites the per-corner value. Put the shorthand first, then per-corner overrides.
6. Mixing % and px awkwardly. Setting a 50% radius on one corner and 12px on another rarely produces what designers expect. Stay in one unit per element.
7. Tables and border-collapse: collapse. The MDN reference is explicit: border-radius does not apply to table or inline-table elements when borders are collapsed. Either switch to border-collapse: separate or apply the radius to a wrapping element.

More Frequently Asked Questions

Why isn't my image getting rounded corners?

If the image is inside a container with border-radius but the corners still look square, the parent isn't clipping. Add overflow: hidden to the parent. Alternatively, apply border-radius directly to the <img> element; images respond to the property natively.

Does border-radius affect performance?

Negligibly. Modern browsers render rounded corners on the GPU and the cost is essentially identical to a square edge. The exception is animating border-radius on a large element every frame (it can trigger layer recompositing), but static rounded corners are effectively free.

Will this work in older browsers?

Yes. Every browser since IE9 supports border-radius unprefixed. The logical-property variants (border-start-start-radius etc.) are newer: Chrome 89+, Firefox 66+, Safari 15+. For older browsers needing logical behaviour, write a small @supports block as a fallback.

How do I make a chat bubble?

Use the four per-corner longhands to round three corners and leave the fourth small or sharp. That's the "mouth" pointing at the speaker. For example, an outgoing-message bubble: border-radius: 16px 16px 4px 16px;. For RTL-aware bubbles, switch to logical longhands so the mouth flips with reading direction.

Why do my pill buttons look uneven on different element widths?

A pill clamps each corner to half the shortest side, which is height for a typical button. So shorter buttons get smaller radii and taller buttons get larger ones. That's the desired behaviour. If you want a constant radius on every button regardless of size, use a fixed pixel value (e.g. border-radius: 24px) instead of the pill trick.

Can I copy the CSS straight into Tailwind / Bootstrap projects?

Yes, the generated CSS is plain standard syntax with no preprocessor or framework dependencies. In Tailwind v4 you can also write arbitrary values as utilities (rounded-[12px] or rounded-[30%/70%]) if you prefer staying in the utility-class style.