CSS shapes

The CSS shapes module describes geometric shapes. It also defines CSS properties that can use the shapes to control the geometry of an element's float area; this area can then be applied to exclusions, or specify an element's content area.

The specification defines several ways to create shapes. Content can be wrapped around or within a shape rather than following the default rectangle shape of the element's box.

Shapes define geometries that can be used as CSS values. This module provides functions for creating ellipses, polygons, and arbitrary geometries. Other CSS modules can make use of shapes defined in this specification, including CSS motion path and CSS masking.

CSS shapes in action

The example below shows an image that has been floated left, and the shape-outside property applied with a value of circle(50%). This creates a circle shape, and the content wrapping the float now wraps around that shape. This changes the length of the wrapping text's line boxes.

Reference

Properties

Note: The CSS shapes module introduces the shape-inside and shape-padding properties that have not yet been implemented.

Data types

Functions

Terms

Guides

Overview of shapes

Defining basic shapes with the shape-margin and clip-path properties, and debugging basic shapes with Developer Tools.

Shapes from box values

Using border-radius curvatures and CSS box model values to create shapes.

Basic shapes with shape-outside

Creating rectangles, circles, ellipses, and polygons with CSS shapes, the reference box, and the shape-outside property.

Shapes from images

Creating shapes from semi-transparent image files and CSS Gradients.

CSS motion path module

CSS masking module

CSS backgrounds and borders module

CSS box model module

Specifications

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2

See also