ellipse() CSS Function

Description

The ellipse() CSS function is an inbuilt function in CSS which is used to create floating text around the elliptical shape picture or anything else. The ellipse() function is part of the CSS Shapes module.

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='ellipse'></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

.ellipse { 

  float: left;

  width: 150px;

  height: 125px;

  shape-outside: ellipse();

}

Browser Support

Desktop
X	X	37	54	24	10.1
Tablets / Mobile
37	37	54	24	10.3	4.0

Last updated by CSSPortal on: 1st December 2019