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.
{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
Reference
Properties
- {{cssxref("shape-image-threshold")}}
- {{cssxref("shape-margin")}}
- {{cssxref("shape-outside")}}
[!NOTE] The CSS shapes module introduces the
shape-inside
andshape-padding
properties that have not yet been implemented.
Data types
- {{cssxref("<basic-shape>")}}
Functions
- {{cssxref("basic-shape/circle","circle()")}}
- {{cssxref("basic-shape/ellipse","ellipse()")}}
- {{cssxref("basic-shape/inset","inset()")}}
- {{cssxref("basic-shape/path","path()")}}
- {{cssxref("basic-shape/polygon","polygon()")}}
- {{cssxref("basic-shape/rect","rect()")}}
- {{cssxref("basic-shape/shape","shape()")}}
- {{cssxref("basic-shape/xywh","xywh()")}}
Terms
Guides
-
- : Defining basic shapes with the
shape-margin
andclip-path
properties, and debugging basic shapes with Developer Tools.
- : Defining basic shapes with the
-
- : Using
border-radius
curvatures and CSS box model values to create shapes.
- : Using
-
Basic shapes with
shape-outside
- : Creating rectangles, circles, ellipses, and polygons with CSS shapes, the reference box, and the
shape-outside
property.
- : Creating rectangles, circles, ellipses, and polygons with CSS shapes, the reference box, and the
-
- : Creating shapes from semi-transparent image files and CSS Gradients.
Related concepts
CSS motion path module
- {{cssxref("offset")}}
- {{cssxref("offset-anchor")}}
- {{cssxref("offset-distance")}}
- {{cssxref("offset-path")}}
- {{cssxref("offset-position")}}
- {{cssxref("offset-rotate")}}
- {{cssxref("ray")}} function
CSS masking module
- {{cssxref("clip")}}
- {{cssxref("clip-path")}}
- {{SVGAttr("clip-rule")}}
- {{cssxref("mask")}}
- {{cssxref("mask-origin")}}
- {{cssxref("mask-position")}}
CSS backgrounds and borders module
- {{cssxref("border-radius")}} shorthand
CSS box model module
- {{cssxref("box-edge")}} data type
Specifications
See also
- CSS Shapes resources
- CSS Shapes 101 via alistapart.com (2014)
- Creating non-rectangular layouts with CSS Shapes via sarasoueidan.com (2013)
- How to use CSS Shapes in your web design via tutsplus.com (2016)
- How to get started with CSS Shapes via webdesignerdepot.com (2015)
- Edit CSS shapes with the shape path editor via mozilla.org (2018) (Video)