CSS shapes

TheCSS 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, includingCSS motion path andCSS masking.

CSS shapes in action

The example below shows an image that has been floated left, and theshape-outside property applied with a value ofcircle(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. You can click "Play" to edit the code in the MDN Playground.

<div>  <img    alt="A hot air balloon"    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />  <p>    One November night in the year 1782, so the story runs, two brothers sat    over their winter fire in the little French town of Annonay, watching the    grey smoke-wreaths from the hearth curl up the wide chimney. Their names    were Stephen and Joseph Montgolfier, they were papermakers by trade, and    were noted as possessing thoughtful minds and a deep interest in all    scientific knowledge and new discovery. Before that night—a memorable night,    as it was to prove—hundreds of millions of people had watched the rising    smoke-wreaths of their fires without drawing any special inspiration from    the fact.  </p></div>

body {  font: 1.2em / 1.5 sans-serif;}img {  float: left;  shape-outside: circle(50%);}

<basic-shape>

Functions

Terms

Reference box

Guides

Overview of shapes: Defining basic shapes with theshape-margin andclip-path properties, and debugging basic shapes withDeveloper Tools.
Shapes from box values: Usingborder-radius curvatures and CSS box model values to create shapes.
Basic shapes withshape-outside: Creating rectangles, circles, ellipses, and polygons with CSS shapes, the reference box, and theshape-outside property.
Shapes from images: Creating shapes from semi-transparent image files and CSS Gradients.