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:

• 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 or percentage values.

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.

• Both shapes must use the same reference box.
• If both shapes are the same type, that type is circle() or ellipse(), 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.
• In all other cases no interpolation is specified.

* 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

• The <basic-shape> data type is defined in CSS Shapes Module Level 1 (W3C Candidate Recommendation, 20 March 2014)