CSS <basic-shape> Data Type

The CSS <basic-shape> data type represents a geometric shape created with a CSS shape function. Basic shapes can be used to define clipping regions, control how inline content flows around an element, and specify other shape-based areas.

Syntax

A <basic-shape> value is created using one of the supported CSS shape functions:

<basic-shape> = <basic-shape-rect> | <circle()> | <ellipse()> | <polygon()> | <path()> | <shape()>

<basic-shape-rect> = <inset()> | <rect()> | <xywh()>

<basic-shape> Functions

Function	Description
`circle()`	Defines a circular shape using a radius and optional center position.
`ellipse()`	Defines an elliptical shape using horizontal and vertical radii and an optional center position.
`inset()`	Defines an inset rectangle using offsets from the edges of the reference box.
`polygon()`	Defines a polygon using a series of coordinate pairs.
`path()`	Defines a shape using an SVG path data string.
`rect()`	Defines a rectangle using distances from the edges of the reference box.
`shape()`	Defines a shape using CSS commands for constructing lines and curves.
`xywh()`	Defines a rectangle using x and y coordinates followed by its width and height.

How <basic-shape> Works

A basic shape describes the geometry of an area rather than directly drawing a visible shape. The CSS property using the value determines how that geometry affects the element.

For example, clip-path can use a basic shape to determine which portion of an element remains visible, while shape-outside can use a basic shape to determine how surrounding inline content flows around a floated element.

<basic-shape> Example

The following example uses the circle() function with the clip-path property to clip an element into a circle:

.circle {
  width: 180px;
  height: 180px;
  background-color: #0088cc;
  clip-path: circle(50%);
}

Browser Result

The <basic-shape> data type can be used with CSS properties that accept geometric shapes, including:

Specifications

The <basic-shape> data type is defined in the CSS Shapes Module Level 1 and expanded by later CSS specifications.

CSS <basic-shape> Data Type