How to Create CSS Border Radius (2026)

The brevio CSS Border Radius Generator lets you visually set corner radii and copy the resulting CSS instantly. Adjust all four corners independently, switch between uniform and asymmetric modes, and preview the shape live — all in your browser.

The border-radius CSS Syntax

border-radius: <top-left> <top-right> <bottom-right> <bottom-left>;

A single value rounds all four corners equally. Two values apply to opposite corner pairs. Four values address each corner in clockwise order starting from top-left. The slash syntax (border-radius: Xpx / Ypx) sets horizontal and vertical radii independently, enabling elliptical corners and organic blob shapes.

How to Set Border Radius Step by Step

1. Open the CSS Border Radius Generator.
2. Choose uniform or per-corner mode. For most UI components — buttons, cards, inputs — uniform rounding is sufficient. Switch to per-corner mode for custom shapes like speech bubbles or asymmetric containers.
3. Set your values. Pixel values work best for fixed-size elements. Percentage values scale with the element, so 50% always produces a circle or ellipse regardless of size.
4. Check the preview shape. The live preview shows exactly how corners will render. A non-square element turns 50% into an ellipse rather than a circle.
5. Copy the CSS. Click Copy CSS to get the border-radius declaration ready to paste into your stylesheet.

Common Border Radius Patterns

Fully rounded pill button

border-radius: 9999px;

Circle (on a square element)

border-radius: 50%;

Card with rounded top, straight bottom

border-radius: 12px 12px 0 0;

Squircle-like organic shape

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

The slash syntax sets horizontal and vertical radii independently for each corner. Values before the slash are horizontal radii; values after are vertical radii, both in TL → TR → BR → BL order. Pair any rounded container with overflow: hidden to clip child elements to the same shape.

Frequently Asked Questions

What is the difference between px and % for border-radius?

Pixel values are absolute and do not change when the element resizes. Percentage values are relative to the element's dimensions, so 50% always produces a circle or ellipse and scales automatically. Use px for UI components with fixed design tokens; use % for responsive shapes like avatars.

Why does border-radius: 50% produce an ellipse instead of a circle?

Because 50% is 50% of each dimension. If the element is 200px wide and 100px tall, the horizontal radius is 100px and the vertical radius is 50px, forming an ellipse. Make the element a perfect square — equal width and height — and 50% produces a circle.

Can border-radius be animated?

Yes. border-radius is animatable with CSS transitions and animations. The browser interpolates between numeric values smoothly. For best performance, apply will-change: border-radius or animate on a GPU-composited layer to avoid triggering layout reflow on every frame.

Does border-radius clip the element's children?

Not by default. To clip overflowing children to the rounded shape, add overflow: hidden to the parent. This is a common pattern for image cards and avatar components where the inner image must follow the same rounded outline.