Codectionary / Developer documentation / CSS

Elliptical Corner Radii

The slash form of border-radius separates horizontal and vertical corner radii.

What it is and why to use it

The slash form of border-radius separates horizontal and vertical corner radii. It creates elliptical curves instead of requiring each corner to be a circular arc. This is useful for a soft panel shape while leaving the content as ordinary readable HTML.

Common mistakes and limitations

Large radii can be scaled down by the browser when they would overlap. Percentages resolve against the box dimensions and can change shape as it resizes. Rounded corners do not automatically clip overflowing descendants without an appropriate overflow rule.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="panel">Horizontal radii are wider than the vertical radii.</div>

Syntax

border-radius: 2rem / 1rem;

Examples

Elliptical Corner Radii

Run the CSS against the supplied HTML, then experiment with the values.

.panel { width: 16rem; max-width: 100%; box-sizing: border-box; padding: 2rem; border: 2px solid #2563eb; border-radius: 2rem / 1rem; background: #dbeafe; color: #172b4d; }
  1. The value before the slash controls horizontal radii.
  2. The value after the slash controls vertical radii, making each curve elliptical.
  3. Change both values to the same length to compare with circular corners. The content still needs padding because corner shape alone does not inset text.
HTML used by this example
<div class="demo"><div class="panel">Horizontal radii are wider than the vertical radii.</div></div>

Best practices

  • Large radii can be scaled down by the browser when they would overlap. Percentages resolve against the box dimensions and can change shape as it resizes. Rounded corners do not automatically clip overflowing descendants without an appropriate overflow rule.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading