`ellipse()` CSS function

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> = 
 <position-one> |
 <position-two> |
 <position-four> 

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

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

<position-one> = 
 left |
 center |
 right |
 top |
 bottom |
 x-start |
 x-end |
 y-start |
 y-end |
 block-start |
 block-end |
 inline-start |
 inline-end |
 <length-percentage> 

<position-two> = 
 [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
 [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
 [ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
 [ start | center | end ]{2} 

<position-four> = 
 [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
 [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
 [ [ start | end ] <length-percentage> ]{2}

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;
}