# 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 eightor 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)