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.
Theellipse()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> <div></div></section>#default-example { background: #ffee99;}#example-element { background: linear-gradient(to bottom right, #ff5522, #0055ff); width: 100%; height: 100%;}Syntax
shape-outside: ellipse(40% 50% at left);shape-outside: ellipse(closest-side farthest-side at 30%);An ellipse is essentially a squashed circle and soellipse() acts in a very similar way tocircle() 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 valuesclosest-sideandfarthest-side.closest-sideUses 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-sideUses 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 asleft. 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}
Examples
Basic ellipse() example
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> <div></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;}Using closest-side / farthest-side values
The keyword values ofclosest-side andfarthest-side are useful to create a quick ellipse based on the size of the floated element reference box.
<div> <div></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;}Specifications
| Specification |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse |
Browser compatibility
See also
- Properties that use this data type:
clip-path,shape-outside - Guide to Basic Shapes