CSS <basic-shape> Data Type

In CSS the <basic-shape> value type represents a basic shape that is defined using a basic shape function.

Basic shapes 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 that you specify, have an image clipped to that shape, etc.

When using this syntax to define shapes, the reference box is defined by each property that uses <basic-shape> values.

Basic Shape Functions

Here are the basic shape functions. These are the functions that can be used to define a <basic-shape>.

inset()
Defines an inset rectangle.
circle()
Defines a circle.
ellipse()
Defines an ellipse.
polygon()
Defines a polygon.

Using Basic Shapes

In the CSS specifications, whenever you see that a property accepts the <basic-shape> value type, this means that it accepts any of the basic shape functions.

For example, the shape-outside property accepts the following value/s:

So you could write something like this:

Here's a working example:

Computed Values of Basic Shapes

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

Using Basic Shapes with Animation

You can use CSS animations to interpolate between one shape and another.

When interpolating between different shapes, 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 (such as finding nonzero in the same list position in both lists) those values do interpolate.

* When both values are lengths, interpolated as lengths; when both values are percentages, interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.

CSS Specifications