CSS - shape-outside

CSSshape-outsideproperty is used to define a shape around which inline content (such as text or images) should wrap. This property is particularly useful for creating non-rectangular or complex text wrapping shapes.

Possible Values

• none− Inline content flows around the element’s margin box, while the float area remains unchanged.
• margin-box− It represents the shape around the outside edge of the margin, with the corner radii specified by the border-radius and margin values.
• content-box− It represents the shape around the outside edge of the content. The corner radius of the box is determined by taking the larger value between 0 and border-radius - border-width - padding.
• border-box− It represents the shape around the outside edge of the border. The shape for the outside of the border follows the standard border radius shaping rule.
• padding-box− It represents the shape around the outside padding edge. The shape for the inside of the border follows the standard border radius shaping rule.
• <basic-shape>− The shape created with functions such ascircle(),ellipse(),polygon(), orpath()(introduced in the level 2 specification,) determines the float area.
• url()− It identifies which image should be used to wrap text around.
• linear-gradient()− To create gradient shapes that text and other inline content can wrap around.

Applies to

Floats.

Syntax

shape-outside = none | margin-box | content-box | border-box | padding-box | circle() | ellipse() | inset() | polygon | path() | url() | linear-gradient();

CSS shape-outside - margin-box

The following example demonstrates the proeprtyshape-outside: margin-boxproperty defines that content should wrap around the outer edge of the element’s margin box −

CSS shape-outside - content-box

The following example demonstrates the propertyshape-outside: content-boxproperty defines that content should wrap around the element’s content box −

CSS shape-outside - padding-box

The following example demonstrates the propertyshape-outside: padding-boxproperty defines that content should wrap around the outer edge of the element’s padding box −

CSS shape-outside - border-box

The following example demonstrates the propertyshape-outside: border-boxdefines the flow of the content around the shape defined by the outer border of the element −

CSS shape-outside - circle()

The following example demonstrates the propertyshape-outside: circle()property creates a circular shape, and the content wraps around the edge of the circle −

CSS shape-outside - ellipse()

The following example demonstrates the propertyshape-outside: ellipse()property creates a ellipse shape, and the content wraps around the element’s bounding box −

CSS shape-outside - url()

The following example demonstrates the propertyshape-outside: url()property allowing text to flow around the defined shape of the image −

CSS shape-outside - polygon()

The following example demonstrates that theshape-outside: polygon()creates a polygonal shape, and the content wraps around the element’s bounding box −

CSS shape-outside - inset()

The following example demonstrates that theshape-outside: inset()property create rectangular shape, and the content wraps around the edge of the rectangle −

CSS shape-outside - path()

The following example demonstrates that theshape-outside: path()property creates triangular shape and allowing text to flow around it −

CSS shape-outside - linear-gradient()

The following example demonstrates that theshape-outside: linear-gradient()property allowing text to flow around the shape defined by linear-gradient −

CSS shape-outside - Related Properties

Following is the list of CSS properties related to shape-outside:

propertyvalueshape-marginAdds margin to CSS shapes that are created with theshape-outsideproperty.shape-image-thresholdSets the alpha channel threshold for shape extraction when using an image with theshape-outsideproperty.