index.md

title	slug	page-type	spec-urls
CSS shapes	Web/CSS/CSS_shapes	css-module	https://drafts.csswg.org/css-shapes/

{{CSSRef}}

The CSS shapes module describes geometric shapes that can be in CSS. For the Level 1 specification, CSS shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box.

Basic example

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.

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

Reference

Properties

• {{cssxref("shape-image-threshold")}}
• {{cssxref("shape-margin")}}
• {{cssxref("shape-outside")}}

Data types

• {{cssxref("<basic-shape>")}}

Guides

• Overview of shapes
• Shapes from box values
• Basic shapes
• Shapes from images

Specifications

{{Specifications}}

See also

• CSS Shapes resources
• CSS Shapes 101
• Creating non-rectangular layouts with CSS Shapes
• How to use CSS Shapes in your web design
• How to get started with CSS Shapes
• What I learned in one weekend with CSS Shapes
• CSS vs. SVG: Shapes and arbitrarily-shaped UI components
• Edit shape paths in CSS — Firefox Developer Tools