CSS Border Radius: A Complete Guide to Rounded Corners and Custom Shapes

The CSS border-radius property is one of the most commonly used styling tools in modern web design. It transforms sharp rectangular boxes into smooth, rounded elements. Whether you need a subtle corner rounding on a card or a perfectly circular avatar, border-radius makes it possible without images or SVGs.

Basic Syntax

At its simplest, border-radius accepts a single value that applies the same rounding to all four corners. The value can be in pixels, percentages, ems or any other CSS length unit.

.box {
  border-radius: 12px;
}

This applies a 12-pixel radius to every corner. The result is a box with uniformly soft edges, a look that has become standard in UI design.

Shorthand vs Longhand

CSS provides individual properties for each corner when you need different values:

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

The shorthand accepts 1, 2, 3 or 4 values and follows the standard CSS clockwise order starting from the top-left corner:

/* all four corners */
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 24px;

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

Pixels vs Percentages

Pixel values create a fixed curve regardless of element size. Percentage values are relative to the element's dimensions, which means the rounding scales with the element. This distinction becomes important for responsive layouts.

A border-radius: 50% on a square element produces a perfect circle. On a rectangular element, it creates an ellipse. If you want consistent rounding at any size, pixels are safer. If you want proportional curves, percentages work better.

Creating Circles and Pills

Two of the most common use cases deserve their own section. For a perfect circle, ensure the element has equal width and height, then apply border-radius: 50%:

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

For a pill shape (used in badges, tags and buttons), use a very large pixel value like 9999px. CSS clamps the radius to half the shorter side, so it always produces smooth, fully rounded ends regardless of the element's width:

.pill {
  padding: 4px 16px;
  border-radius: 9999px;
}

The 8-Value Syntax (Elliptical Corners)

This is where border-radius gets powerful. By adding a slash, you can specify separate horizontal and vertical radii for each corner. The syntax is:

border-radius: h1 h2 h3 h4 / v1 v2 v3 v4;

The values before the slash control the horizontal radius, and the values after control the vertical radius. This creates elliptical curves instead of circular ones, opening the door to organic, blob-like shapes.

/* Smooth organic blob */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

/* Egg shape */
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

Creating Custom Shapes

The 8-value syntax makes it possible to create shapes that look nothing like rounded rectangles. Here are some popular ones:

Leaf Shape

.leaf {
  border-radius: 5% 95% 5% 95% / 95% 5% 95% 5%;
}

Drop Shape

.drop {
  border-radius: 0 50% 50% 50%;
}

Chat Bubble

.bubble {
  border-radius: 20px 20px 20px 0;
}

These shapes can be used for decorative backgrounds, icons, tooltips and other UI elements. Experimenting with a visual generator tool is the fastest way to discover new combinations.

Responsive Considerations

On small screens, large border-radius values can look disproportionate. Consider scaling your radius with the viewport or using CSS clamp:

.card {
  border-radius: clamp(8px, 2vw, 24px);
}

This ensures the rounding looks natural at every breakpoint. For elements that change aspect ratio, percentage-based values will adapt automatically, while pixel values remain constant.

Performance and Rendering

The border-radius property is GPU-accelerated in all modern browsers and has virtually no performance cost. However, combining it with overflow: hidden on elements with many children or complex content can trigger additional compositing work. For most use cases this is negligible, but it is worth knowing if you are debugging jank on scroll-heavy pages.

One gotcha: border-radius does not clip child elements by default. If a child overflows the parent, it will extend beyond the rounded corners. Add overflow: hidden to the parent to enforce clipping.

Browser Support

The border-radius property has been supported in all major browsers since IE9. The 8-value elliptical syntax is also universally supported. You no longer need vendor prefixes like -webkit-border-radius. It is one of the safest CSS properties to use without any fallback strategy.

Quick Reference

• Circle: border-radius: 50% on a square element
• Pill: border-radius: 9999px
• One rounded corner: border-radius: 16px 0 0 0
• Elliptical: use the slash syntax for horizontal / vertical radii
• Responsive: use clamp() or percentage values