Web/CSS/basic-shape

The <basic-shape> CSS data type represents a shape used in the clip-path, shape-outside, and offset-path properties.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

The <basic-shape> data type is defined with one of the basic shape functions listed below.

When creating a shape, the reference box is defined by each property that uses <basic-shape> values. The coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box.

Shape functions

The following shapes are supported. All <basic-shape> values use functional notation and are defined here using the value definition syntax.

inset()

inset( <shape-arg>{1,4} [round <border-radius>]? )

Defines an inset rectangle.

When all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.

The optional <border-radius> argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.

A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area.

circle()

circle( [<shape-radius>]? [at <position>]? )

The <shape-radius> argument represents r, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2).

The <position> argument defines the center of the circle. This defaults to center if omitted.

ellipse()

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

The <shape-radius> arguments represent r_x and r_y, 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 r_x value) and the used height (for the r_y value) of the reference box.

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

polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<fill-rule> represents the filling rule used to determine the interior of the polygon. Possible values are nonzero and evenodd. Default value when omitted is nonzero.

Each pair argument in the list represents x_i and y_i - the x and y axis coordinates of the i^th vertex of the polygon.

path()

path( [<fill-rule>,]? <string>)

The optional <fill-rule> represents the filling rule used to determine the interior of the path. Possible values are nonzero and evenodd. Default value when omitted is nonzero.

The required <string> is an SVG Path string encompassed in quotes

The arguments not defined above are defined as follows:

<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.

closest-side uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. 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 circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.

Description

Computed values of basic shapes

The values in a <basic-shape> function are computed as specified, with these exceptions:

Omitted values are included and compute to their defaults.
A <position> value in circle() or ellipse() is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.
A <border-radius> value in inset() is computed as an expanded list of all eight <length> or percentage values.

Interpolation of basic shapes

When animating between one <basic-shape> and another, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as <length>, <percentage>, or calc() where possible. If list values are not one of those types but are identical, those values do interpolate.

Both shapes must use the same reference box.
If both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions.
If both shapes are of type inset(), interpolate between each value in the shape functions.
If both shapes are of type polygon(), both polygons have the same number of vertices, and use the same <fill-rule>, interpolate between each value in the shape functions.
If both shapes are of type path(), both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers.
In all other cases no interpolation occurs.

Examples

Animated polygon

In this example, we use the @keyframes at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  }

  to {
    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
  }
}

Result

Specifications

Specification	Status	Comment
CSS Shapes Module Level 1The definition of '<basic-shape>' in that specification.	Candidate Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`<basic-shape>`	Chrome Full support 37	Edge Full support 79	Firefox Full support 54	IE No support No	Opera Full support 24	Safari Full support 10.1	WebView Android Full support 37	Chrome Android Full support 37	Firefox Android Full support 54	Opera Android Full support 24	Safari iOS Full support 10.3	Samsung Internet Android Full support 3.0
Animation	Chrome Full support 37	Edge Full support 79	Firefox Full support 54	IE No support No	Opera Full support 24	Safari Full support 10.1	WebView Android Full support 37	Chrome Android Full support 37	Firefox Android Full support 54	Opera Android Full support 24	Safari iOS Full support 10.3	Samsung Internet Android Full support 3.0
`circle()`	Chrome Full support 37	Edge Full support 79	Firefox Full support 54	IE No support No	Opera Full support 24	Safari Full support 10.1	WebView Android Full support 37	Chrome Android Full support 37	Firefox Android Full support 54	Opera Android Full support 24	Safari iOS Full support 10.3	Samsung Internet Android Full support 3.0
`inset()`	Chrome Full support 37	Edge Full support 79	Firefox Full support 54	IE No support No	Opera Full support 24	Safari Full support 10.1	WebView Android Full support 37	Chrome Android Full support 37	Firefox Android Full support 54	Opera Android Full support 24	Safari iOS Full support 10.3	Samsung Internet Android Full support 3.0
`path()`	Chrome Partial support 46 Notes' Partial support 46 Notes' Notes' Only supported on the `offset-path` property.	Edge Partial support 79 Notes' Partial support 79 Notes' Notes' Only supported on the `offset-path` property.	Firefox Partial support 63 Notes' Disabled' Partial support 63 Notes' Disabled' Notes' Only supported on the `clip-path` and `offset-path` properties. Disabled' From version 63: this feature is behind the `layout.css.clip-path-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Partial support 33 Notes' Partial support 33 Notes' Notes' Only supported on the `offset-path` property.	Safari No support No	WebView Android Partial support 46 Notes' Partial support 46 Notes' Notes' Only supported on the `offset-path` property.	Chrome Android Partial support 46 Notes' Partial support 46 Notes' Notes' Only supported on the `offset-path` property.	Firefox Android Partial support 63 Notes' Disabled' Partial support 63 Notes' Disabled' Notes' Only supported on the `clip-path` and `offset-path` properties. Disabled' From version 63: this feature is behind the `layout.css.clip-path-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Partial support 33 Notes' Partial support 33 Notes' Notes' Only supported on the `offset-path` property.	Safari iOS No support No	Samsung Internet Android Partial support 5.0 Notes' Partial support 5.0 Notes' Notes' Only supported on the `offset-path` property.
`polygon()`	Chrome Full support 37	Edge Full support 79	Firefox Full support 54	IE No support No	Opera Full support 24	Safari Full support 10.1	WebView Android Full support 37	Chrome Android Full support 37	Firefox Android Full support 54	Opera Android Full support 24	Safari iOS Full support 10.3	Samsung Internet Android Full support 3.0

Legend

Full support: Full support
Partial support: Partial support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.