CSS border-radius Slash Syntax for Elliptical Corners

This article explains how the CSS border-radius shorthand uses the forward slash (/) syntax to define elliptical corners. By separating horizontal and vertical radii with a slash, developers can break away from standard circular curves to create custom ovals, organic shapes, and asymmetric borders.

The Standard vs. Elliptical Corner

By default, the border-radius property takes between one and four values to set circular corners. For example, border-radius: 20px; draws a quarter-circle with a radius of 20 pixels at each corner. In this standard mode, the horizontal radius and vertical radius of the curve are identical.

To create an elliptical curve, the horizontal radius and the vertical radius must have different values. The forward slash (/) is the CSS mechanism used to separate these two axes.

border-radius: [horizontal radii] / [vertical radii];

Values placed before the slash define the horizontal radii (the width of the ellipse's arc). Values placed after the slash define the vertical radii (the height of the ellipse's arc).

How Values are Mapped

Both sides of the slash independently follow standard four-value CSS box-model expansion rules (top-left, top-right, bottom-right, bottom-left):

• One value: Applied to all four corners.
• Two values: The first sets top-left and bottom-right; the second sets top-right and bottom-left.
• Three values: The first sets top-left; the second sets top-right and bottom-left; the third sets bottom-right.
• Four values: Sets top-left, top-right, bottom-right, and bottom-left in clockwise order.

Example: Uniform Elliptical Corners

To give every corner a horizontal radius of 40px and a vertical radius of 20px:

.box {
  border-radius: 40px / 20px;
}

This creates an identical quarter-ellipse on all four corners.

Example: Fully Asymmetrical Shapes

You can mix different counts of values on either side of the slash to create complex shapes:

.organic-shape {
  border-radius: 60px 20px 40px 10px / 30px 50px 20px 40px;
}

In this case:

• Top-left: 60px horizontal, 30px vertical
• Top-right: 20px horizontal, 50px vertical
• Bottom-right: 40px horizontal, 20px vertical
• Bottom-left: 10px horizontal, 40px vertical

Using Percentages

Percentages are resolved against the dimensions of the element’s border box—horizontal percentages against the element's width, and vertical percentages against its height.

.pill-ellipse {
  border-radius: 50% / 25%;
}

This ensures that the horizontal curve spans halfway across the width, while the vertical curve spans a quarter of the height, scaling fluidly with responsive layouts.

Relationship to Longhand Properties

The slash syntax exists exclusively for the border-radius shorthand property. When using individual longhand properties, the slash is omitted, and values are separated by a space:

/* Shorthand */
border-radius: 40px / 20px;

/* Equivalent longhand */
border-top-left-radius: 40px 20px;
border-top-right-radius: 40px 20px;
border-bottom-right-radius: 40px 20px;
border-bottom-left-radius: 40px 20px;

In longhand properties, the first value always represents the horizontal radius and the second value represents the vertical radius.