CSS Border Radius

What is CSS Border Radius?

CSS border-radius is a property that rounds the corners of an element’s outer border edge. It allows web designers to create smooth, curved corners without using images or complex design techniques. The property applies to the entire background of the element, even when no border is specified, with the exact position of the clipping defined by the background-clip property ^[1].

When applied to an element, border-radius enables the creation of visually appealing designs such as rounded buttons, cards, and even perfect circles or ellipses. The property functions by specifying the radius size of each corner, effectively determining how rounded they appear.

Border-radius serves as a shorthand property that simultaneously sets the following individual properties:

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

This consolidated approach simplifies the CSS code and makes it more maintainable. The property accepts various CSS length units including pixels (px), percentages (%), em (em), rem (rem), and other valid CSS units ^[2]. Each unit offers different advantages depending on the design requirements—pixels provide precise control while percentages create responsive designs that scale with the element’s dimensions.

The syntax for border-radius follows this pattern:

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

This flexible syntax allows for multiple configuration options. When specifying values:

• One value applies to all four corners equally
• Two values set the top-left/bottom-right corners and top-right/bottom-left corners respectively
• Three values control the top-left, top-right/bottom-left, and bottom-right corners
• Four values individually target each corner in the order: top-left, top-right, bottom-right, bottom-left

Additionally, the property can create elliptical corners by using the slash syntax to specify different horizontal and vertical radii. For instance, border-radius: 10px / 30px; creates corners with a 10-pixel horizontal radius and a 30-pixel vertical radius ^[2].

It’s worth noting that border-radius does not work on table elements when the border-collapse property is set to collapse, as the borders are treated differently in this context ^[3]. Furthermore, when an element has a background image, it will be naturally clipped at the rounded corners.

For perfect circular shapes, setting the border-radius to 50% of an element with equal height and width dimensions creates a perfect circle. This technique is commonly used for profile pictures, icons, and decorative elements throughout modern web interfaces ^[4].

The property enjoys widespread browser support, making it a reliable choice for contemporary web development projects across all major browsers ^[3].

How does border-radius work in CSS?

The border-radius property in CSS works by creating curved corners using either circles or ellipses that define the shape of each corner. Under the hood, border-radius draws the corner around a curved path with a radius equal to the specified value, effectively smoothing what would otherwise be a sharp angle.

When applying border-radius, the browser renders each corner by mapping out a quarter-circle (or quarter-ellipse) that defines how the corner should curve. The radius value determines the size of this imaginary circle, with larger values creating more pronounced curves. If the value is set to zero, the corner remains square with no rounding effect.

Border-radius affects both the outer and inner edges of an element’s border differently. For the outer edge, the curve follows the exact radius specified. However, the inner edge (padding edge) radius is calculated as the outer radius minus the corresponding border thickness. Consequently, if this calculation results in a negative value, the inner radius defaults to zero ^[5][6].

The property accepts between one and four values, where:

/* One value applies to all corners */
border-radius: 15px;

/* Two values: first (top-left/bottom-right), second (top-right/bottom-left) */
border-radius: 15px 50px;

/* Three values: first (top-left), second (top-right/bottom-left), third (bottom-right) */
border-radius: 15px 50px 30px;

/* Four values: top-left, top-right, bottom-right, bottom-left */
border-radius: 15px 50px 30px 5px;

To create elliptical corners rather than perfect circles, CSS offers the slash syntax. Values before the slash define horizontal radii, while values after the slash specify vertical radii ^[6]. For example:

border-radius: 10px / 30px; /* horizontal radius / vertical radius */

When using percentages with border-radius, horizontal radius percentages refer to the width of the border box, whereas vertical radius percentages correspond to the height ^[7]. Thus, setting border-radius: 50% on a square element creates a perfect circle, since both dimensions receive the same effective radius.

An important rule governs situations where radius values exceed element dimensions: corner curves must not overlap. When the sum of adjacent border radii exceeds the size of the border box, all border radii are proportionally reduced until none overlap ^[7]. This explains why border-radius: 50% and border-radius: 100% produce identical results on square elements—both effectively max out at the available space.

Border-radius functions differently with various border styles and widths. Nevertheless, regardless of border style, the fundamental mechanism remains consistent—the property defines the curvature around which borders flow, creating rounded corners according to the specified radius values.

Different ways to use border-radius

The CSS border-radius property offers multiple syntax patterns for creating rounded corners on elements. Each pattern provides different levels of control over how corners are shaped, allowing designers to create various visual effects.

One value for all corners

Specifying a single value with the border-radius property applies the same radius to all four corners of an element, creating uniformly rounded corners. This approach represents the simplest way to implement rounded corners.

border-radius: 10px;

When using this syntax, the browser applies a 10-pixel radius to each corner, creating symmetrical curves. Notably, you can use percentage values instead of fixed lengths, which makes the corner radius relative to the element’s dimensions. A value of 50% creates a perfect circle when applied to a square element.

Two values for opposite corners

The two-value syntax offers more design flexibility by allowing different radii for diagonal corners:

border-radius: 10px 5px;

In this pattern, the first value (10px) applies to both the top-left and bottom-right corners, whereas the second value (5px) applies to the top-right and bottom-left corners. This creates an alternating corner effect that can add visual interest to elements.

Three values for mixed corners

With three values, you gain further control over corner appearance:

border-radius: 15px 50px 30px;

Here, the first value (15px) applies solely to the top-left corner. The second value (50px) applies to both the top-right and bottom-left corners. Finally, the third value (30px) applies specifically to the bottom-right corner. This arrangement follows the clockwise pattern from the top-left corner.

Four values for each corner

For maximum precision, the four-value syntax enables complete control over each individual corner:

border-radius: 10px 5px 20px 16px;

These values are applied in clockwise order starting from the top-left: the first value (10px) for top-left, second (5px) for top-right, third (20px) for bottom-right, and fourth (16px) for bottom-left. This provides the most granular control, allowing creation of asymmetrical designs where each corner has a unique radius.

Beyond these basic patterns, border-radius also supports the slash syntax for creating elliptical corners. By adding a slash followed by additional values, you can define different horizontal and vertical radii:

border-radius: 55px 55px 55px 55px / 25px 25px 25px 25px;

This advanced syntax creates elliptical corners where the values before the slash represent horizontal radii and those after represent vertical radii, both following the same clockwise pattern.

Using units with border-radius

Border-radius measurements in CSS can be expressed through various units, each offering distinct advantages depending on the design requirements. The choice of unit significantly impacts how corners are rendered and how they respond to changes in element size or device viewport.

Pixels (px)

Pixel units provide precise control over corner radii with fixed measurements that remain consistent regardless of element dimensions or parent container sizes. When applied with pixel values, border-radius creates corners with circular arcs or pill shapes even if the value exceeds the element’s largest side ^[3]. For instance, setting border-radius: 20px produces exactly 20-pixel rounded corners on all sides of an element. This unit is particularly useful when designers need consistent, predictable corner appearances across different screen sizes.

.pixel-example {
  border: 2px solid black;
  border-radius: 25px;
}

Unlike relative units, pixel values do not scale when users adjust browser zoom levels, ensuring the visual design maintains its intended appearance in most scenarios.

Percentages (%)

Percentage values create responsive rounded corners that automatically adjust proportionally to an element’s dimensions. These values reference the corresponding dimension of the border box—horizontal radii are calculated as a percentage of the element’s width, while vertical radii are based on the element’s height ^[3]. Consequently, when applied to rectangles, percentage-based border-radius values produce asymmetrical corners.

.percentage-example {
  border: 2px solid black;
  border-radius: 30%;
}

Moreover, percentage values generate elliptical corners rather than circular ones, starting at the middle of each side and resulting in oval or elliptical shapes ^[3]. This behavior makes percentages especially valuable for creating fluid designs that adapt gracefully to variable container sizes. A common technique involves using border-radius: 50% on elements with equal height and width to create perfect circles.

em and rem units

The em and rem units connect border-radius measurements to font dimensions, creating more cohesive and scalable designs. One em equals the current font size of the element, while rem (root em) is relative to the root element’s font size (typically the html element).

.em-example {
  border: 2px solid black;
  border-radius: 1.5em; /* 1.5 times the current font size */
}

Similar to pixels, both em and rem units produce circular arcs or pill shapes ^[3]. The primary difference lies in their responsiveness—em values scale when the element’s font size changes, whereas rem values adjust only when the root font size is modified. This relationship to typography makes these units ideal for creating consistent visual harmony between text and UI components.

In essence, selecting the appropriate unit depends on whether the design requires fixed dimensions (px), element-relative scaling (%), or typography-based proportions (em/rem).

Creating advanced shapes with border-radius

Beyond basic rounded corners, the border-radius property enables the creation of sophisticated geometric shapes without additional HTML elements or images. This versatility allows web designers to craft circles, ellipses, and pill shapes using pure CSS.

Perfect circles

Creating a perfect circle with CSS requires two key elements: equal height and width dimensions, and a border-radius value of 50%. This percentage value is based on the element’s dimensions ^[8], making both sides perfectly round. When applied to a square element, the 50% value creates a complete circle because the radii add up to 100% (50% + 50% = 100%), eliminating any straight lines from the original square shape ^[8].

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: orange;
}

Although values higher than 50% can be specified, they produce identical results to 50% because corner curves cannot overlap ^[9]. This limitation explains why border-radius: 50% and border-radius: 100% yield the same circular shape.

Elliptical corners using slash syntax

The slash syntax in border-radius allows for creating elliptical borders by specifying different horizontal and vertical radii ^[10]. The values before the slash control the horizontal radius, while values after the slash determine the vertical radius. This approach provides precise control over corner curvature in both dimensions.

border-radius: 10px / 30px; /* horizontal radius / vertical radius */
border-radius: 50% 20% / 10% 40%; /* multiple values with slash syntax */

Slash syntax can be combined with the one-to-four value pattern, allowing intricate shape creation ^[5]. For instance, border-radius: 10px 5% / 20px 25em 30px 35em; applies different horizontal and vertical radii to each corner independently.

Oval and pill shapes

Ovals are created similarly to circles but with unequal width and height dimensions while maintaining a 50% border-radius ^[9]. The percentage calculation produces an elliptical shape rather than a circular one.

.oval {
  width: 160px;
  height: 80px;
  border-radius: 50%;
  background: orange;
}

Pill shapes, yet another variation, are formed by applying large border-radius values to rectangles ^[1]. When the border-radius exceeds half the shorter dimension, the element takes on a pill-like appearance with completely rounded ends.

.pill {
  width: 200px;
  height: 80px;
  border-radius: 40px;
  background: #ddd;
}

For half-circles, selective application of border-radius to specific corners creates unique shapes: border-bottom-right-radius: 90px; border-top-right-radius: 90px; produces a half-circle when applied to an element with appropriate dimensions ^[2].

Interactive effects with border-radius

Dynamic corner manipulation gives CSS border-radius its interactive potential, enabling engaging user experiences beyond static rounded elements. Through CSS transitions and animations, web designers can create elements that respond visually to user interactions.

Hover transitions

Border-radius transitions during hover events create subtle yet effective interactive feedback. When users move their cursor over an element, its corners can smoothly transform from one state to another. This technique is often applied to buttons, cards, and navigation elements to enhance user engagement.

.button {
  border-radius: 25px;
  transition: border-radius 0.5s ease-in-out;
}

.button:hover {
  border-radius: 10px;
}

More complex hover effects combine border-radius changes with other properties. The “liquid morph” technique, for instance, decreases border-radius on hover while simultaneously applying rotation and gradient changes to create a flowing effect ^[11]. Likewise, card designs may employ hover states where the top layer shrinks with modified border-radius to reveal content underneath ^[11].

Animated corner changes

Border-radius animations utilize keyframes to continuously modify corner shapes, creating organic-feeling movements that operate independently of user interaction. This approach adds personality to otherwise static elements ^[12].

.avatar-wobble {
  border-radius: 250px 750px 250px 750px / 750px 250px 750px 250px;
  animation: wobble 15s ease-in-out alternate infinite;
}

@keyframes wobble {
  50% {
    border-radius: 750px 550px 350px 750px / 350px 750px 550px 450px;
  }
  100% {
    border-radius: 750px 250px 750px 250px / 250px 750px 250px 750px;
  }
}

The animation-direction property set to “alternate” makes animations run forwards then backwards, creating more natural-looking movements ^[13]. Timing functions like ease-in-out cause animations to appear to pause briefly at endpoints, enhancing the organic quality of the effect ^[13].

For optimal user experience, designers should consider device compatibility. Initially triggered via hover events, many developers now implement continuous animations to ensure mobile users—who cannot hover—still experience these dynamic effects ^[13].