ellipse() CSS Function

Description

The CSS ellipse() function is a basic shape value that's part of the CSS Shapes module. It can be used to create ellipses of various sizes and positions, and to clip other elements to the shape of an ellipse.

The ellipse() function takes two arguments:

• The horizontal radius of the ellipse, which can be a <length>, <percentage>, or the special values closest-side and farthest-side.
• The vertical radius of the ellipse, which can be a <length>, <percentage>, or the special values closest-side and farthest-side.

The ellipse's center is positioned at the center of its bounding box, unless the at keyword is used to specify a different position.

The ellipse() function can be used with the following CSS properties:

• shape-outside: To control the flow of content around the element.
• clip-path: To clip the element's contents to the shape of an ellipse.
• text-shadow: To create a text shadow in the shape of an ellipse.

Here is an example of how to use the ellipse() function:

.ellipse {
  shape-outside: ellipse(100px 50px);
}

This will create an element with an elliptical shape, with a horizontal radius of 100px and a vertical radius of 50px.

Here is another example:

.text-shadow-ellipse {
  text-shadow: ellipse(10px 10px) 5px 5px black;
}

This will create a text shadow in the shape of an ellipse, with a horizontal radius of 10px and a vertical radius of 10px. The shadow will be offset by 5px in both directions and will be black.

The ellipse() function is a powerful tool for creating rounded elements and clipping other elements to elliptical shapes. It is supported by all major browsers.

Syntax

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
/* where.. */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

Values

• shape-radius represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box.
• positionThe position argument defines the center of the ellipse. This defaults to center if omitted.

Example

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

.shape {

    float: left;

    shape-outside: ellipse(40% 50% at left);

    margin: 20px;

    width: 100px;

    height: 200px;

}

Browser Support

The following table will show you the current browser support for the CSS ellipse() function.

Desktop
79	37	54	24	10.1

Tablets / Mobile
37	54	24	10.3	3	37

Last updated by CSSPortal on: 7th October 2023