files/en-us/web/css/reference/values/basic-shape/ellipse/index.md
The ellipse() CSS function is one of the {{cssxref("basic-shape")}} data types.
{{InteractiveExample("CSS Demo: ellipse()")}}
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%;
}
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 {{cssxref("basic-shape/circle","circle()")}} except that we have to specify two radii x and y.
<shape-radius>
closest-side and farthest-side.
closest-side
farthest-side
<position>
left. The <position> value defaults to center if omitted.{{csssyntax}}
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:
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
.shape {
float: left;
shape-outside: ellipse(40% 50% at left);
margin: 20px;
width: 100px;
height: 200px;
}
{{EmbedLiveSample("ellipse", "", "300px")}}
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.
<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>
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;
}
{{EmbedLiveSample("ellipse-keywords", "", "300px")}}
{{Specifications}}
{{Compat}}