CSS ellipse() Function

The ellipse() function is a CSS basic shape value that's part of the CSS Shapes module.

Basic shapes such as ellipse() can be used as a value for properties such as shape-outside to control the flow of content around the element, and clip-path to clip the element's contents to the basic shape.

This means you can do things like, have text flowing around the element in the shape of an ellipse, have an image clipped to the shape of an ellipse, etc.

Basic Example

Here's an example of how the ellipse() function works with the shape-outside property:

<style>
div {  
  float: left;
  width: 200px;
  height: 150px;
  shape-outside: ellipse();
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

Here we have a div floated to the left. And because I've applied shape-outside: ellipse() to it, the subsequent text flows around the (invisible) ellipse that I specified.

It's easier to visualize this concept by looking at the following example.

<style>
div {  
  float: left;
  width: 200px;
  height: 150px;
  shape-outside: ellipse();
  background: yellow;
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

As you can see, the ellipse is drawn within the floated box. The floated box actually protrudes out from the ellipse, into the surrounding text. But because we've applied shape-outside: ellipse(), the text is allowed to flow right up to the edges of the ellipse. The extent to which it does this depends on any arguments that you pass to the ellipse() function.

This example doesn't use any arguments to specify the ellipse's radii. Therefore, it uses the default value, which is closest-side closest-side (ellipses use two values here).

How to Specify the Ellipse's Radii

You can specify the radii of the ellipse by providing two arguments to the ellipse() function. The arguments specify the x-axis and y-axis radii of the ellipse, in that order.

As mentioned, closest-side is the default value for both radii. So it's the equivalent as doing this:

Using closest-side means that the radius will be based on the length from the center of the shape to the closest side of the reference box (in the radius dimension).

You can also specify farthest-side. In this case, the ellipse will base the radius on the length from the center of the shape to the farthest side of the reference box (in the radius dimension).

You can also use length values (such as px, em, vw, etc) and percentage values to specify the ellipse's radii.

Here's an example of using a percentage value.

<style>
div {  
  float: left;
  width: 200px;
  height: 150px;
  shape-outside: ellipse(30% 50%);
  background: yellow;
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

How to Position the Ellipse

You can specify a position for the ellipse by following the radii arguments with a valid CSS position. This position specifies the ellipse's center. Just separate the radius and the position with at. Like this:

The center of this ellipse is 10 pixels from the left and 150 pixels from the top.

Here's a working example:

<style>
div {  
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: ellipse(150px 70px at 50px 115px);
  background: yellow;
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>
<p>Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Rhoncus est pellentesque elit ullamcorper dignissim cras. Sodales ut etiam sit amet nisl purus in mollis nunc. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Enim ut sem viverra aliquet eget. Eu nisl nunc mi ipsum faucibus. Enim facilisis gravida neque convallis a cras semper auctor neque. Sit amet mauris commodo quis imperdiet massa tincidunt nunc.</p>

Position can be represented as a length value, a percentage value, or a combination of the left, center, right, top, and bottom keywords.

Using `ellipse()` with `clip-path()`

Here's an example of using the CSS ellipse() function with the clip-path property.

<style>
img {
 -webkit-clip-path: ellipse();
 clip-path: ellipse();
}
</style>

<img src="/pix/samples/15m.jpg" alt="Longtail boat in Thailand">

If your browser supports the clip-path property (and the ellipse() function), the above image should appear in the shape of an ellipse. Otherwise it will appear as a normal rectangle shape.

Here's another example, this time with some arguments that change the ellipse's radii and position:

<style>
img {
 -webkit-clip-path: ellipse(farthest-side closest-side at 50px 100px);
 clip-path: ellipse(farthest-side closest-side at 50px 100px);
}
</style>

<img src="/pix/samples/15m.jpg" alt="Longtail boat in Thailand">

At the time of writing, browser support for the clip-path property is limited. None of the major browsers support it, however, webkit browsers have partial support using the -webkit- prefix.

Official Syntax

The official syntax of the ellipse() function is as follows:

And the syntax of <shape-radius> is:

The default value is closest-side.

The syntax for <position> is:

Possible Values

The following values can be used to specify the ellipse's radii:

shape-radius

This can be specified in either of the following ways:

length

Specifies a length value to use (e.g. px, em, vw, etc) for the radius.

percentage

Specifies a percentage value to use. The percentage value uses the width and height of the reference box.

closest-side

This is the default value.

Specifies that the ellipse's radius will use the length from the center of the shape to the closest side of the box that uses the ellipse() function (this is the closest side in the radius dimension).

farthest-side

Specifies that the ellipse's radius will use the length from the center of the shape to the farthest side of the reference box (the farthest side in the radius dimension).

position

The position argument defines the center of the circle. It is specified as a value from the top, left corner of the reference box using the values listed above (under Official Syntax).

CSS Specifications

The ellipse() function is defined in CSS Shapes Module Level 1 (W3C Candidate Recommendation, 20 March 2014)
It's also being further defined in CSS Shapes Module Level 2 (Editorâ€™s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.