ellipse()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

The ellipse() CSS function is one of the <basic-shape> data types.

Try it

clip-path: ellipse(20px 50px);

clip-path: ellipse(4rem 50% at right center);

clip-path: ellipse(closest-side closest-side at 5rem 6rem);

clip-path: ellipse(closest-side farthest-side);

<section class="default-example" id="default-example">   <div class="transition-all" id="example-element"></div> </section>

#default-example {   background: #ffee99; }  #example-element {   background: linear-gradient(to bottom right, #ff5522, #0055ff);   width: 100%;   height: 100%; }

Syntax

css

shape-outside: ellipse(40% 50% at left); shape-outside: ellipse(closest-side farthest-side at 30%);

An ellipse is essentially a squashed circle and so ellipse() acts in a very similar way to circle() except that we have to specify two radii x and y.

Values

<shape-radius>

Two radii, x and y in that order. These may be a <length>, or a <percentage> or values closest-side and farthest-side.

closest-side: Uses the length from the center of the shape to the closest side of the reference box. For ellipses, this is the closest side in the radius dimension.
farthest-side: Uses the length from the center of the shape to the farthest side of the reference box. For ellipses, this is the farthest side in the radius dimension.

<position>

Moves the center of the ellipse. May be a <length>, or a <percentage>, or a values such as left. The <position> value defaults to center if omitted.

Formal syntax

<ellipse()> = 
  ellipse( <radial-size>? [ at <position> ]? )  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>

This example shows an ellipse that is floated left that has a horizontal radius of 40%, a vertical radius of 50%, and a left position. This means that the center of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. Click "Play" in the code blocks to change these values to see how the ellipse changes:

html

<div class="box">   <div class="shape"></div>   <p>     One November night in the year 1782, so the story runs, two brothers sat     over their winter fire in the little French town of Annonay, watching the     grey smoke-wreaths from the hearth curl up the wide chimney. Their names     were Stephen and Joseph Montgolfier, they were papermakers by trade, and     were noted as possessing thoughtful minds and a deep interest in all     scientific knowledge and new discovery. Before that night—a memorable night,     as it was to prove—hundreds of millions of people had watched the rising     smoke-wreaths of their fires without drawing any special inspiration from     the fact.   </p> </div>

css

body {   font: 1.2em / 1.5 sans-serif; } .shape {   float: left;   shape-outside: ellipse(40% 50% at left);   margin: 20px;   width: 100px;   height: 200px; }

Using closest-side / farthest-side values

The keyword values of closest-side and farthest-side are useful to create a quick ellipse based on the size of the floated element reference box.

html

<div class="box">   <div class="shape"></div>   <p>     One November night in the year 1782, so the story runs, two brothers sat     over their winter fire in the little French town of Annonay, watching the     grey smoke-wreaths from the hearth curl up the wide chimney. Their names     were Stephen and Joseph Montgolfier, they were papermakers by trade, and     were noted as possessing thoughtful minds and a deep interest in all     scientific knowledge and new discovery. Before that night—a memorable night,     as it was to prove—hundreds of millions of people had watched the rising     smoke-wreaths of their fires without drawing any special inspiration from     the fact.   </p> </div>

css

body {   font: 1.2em / 1.5 sans-serif; } .shape {   float: left;   shape-outside: ellipse(closest-side farthest-side at 30%);   margin: 20px;   width: 100px;   height: 140px; }

Specifications

Specification
CSS Shapes Module Level 1> # funcdef-basic-shape-ellipse>

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Aug 13, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content