CSS ellipse() Function

.example {
  clip-path: ellipse(20px 50px);
}

Meaning

The ellipse() css function defines an ellipse using two radii and a position.

Note: The position argument defines the center of the ellipse. This defaults to center if omitted.

Version: CSS3

ellipse( [shape-radius{2}]? [at position]? )

The numbers in the table specify the first browser version that fully supports the property.

The following table describes the arguments of this function.

Argument	Description
shape-radius	Defines x and y in that order. These may be a length, or a percentage or values closest-side and farthest-side. closest-side: Uses 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-side: Uses 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 as left.

Argument

Description

shape-radius

Defines x and y in that order. These may be a length, or a percentage or values closest-side and farthest-side.

closest-side: Uses 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-side: Uses 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 as left.

.example {
  clip-path: ellipse(closest-side closest-side at 5rem 6rem);
}