The shape-outside Property

Overview

The shape-outside property is used to define a shape that affects the flow of inline content around a floated element. Rather than sticking to the conventional rectangular bounding box, content can wrap around complex shapes such as circles, ellipses, polygons, or even images. The specified values of this property essentially form the float area for the floated elements, tailoring the space in which surrounding inline content wraps, allowing for more elaborate and flexible layouts.

Examples and Usage

Let's explore a basic, practical use case of the shape-outside property. We'll create a circular shape around which the text content will wrap.

HTML Structure

<div class="wrapped-content">
  <p>CSS, or Cascading Style Sheets, is a language designed to control the presentation of documents written in a markup language such as HTML. It is primarily used for layout and styling purposes, enabling a consistent aesthetic across multiple pages of a website.</p>
  
  <p>Developed in the early 1990s, CSS revolutionized web page aesthetics, offering an alternative to various techniques such as HTML elements and attributes that were previously used to manage fonts, colors, and other styles. This led to cleaner, more maintainable code. With CSS, developers can define style rules applicable to multiple elements, facilitating consistent design across a site.</p>
  
  <p>In the present day, CSS is a vital component of web development, utilized by millions of developers globally to build visually compelling websites. With continuous enhancements and the introduction of new features, it keeps pace with the ever-evolving landscape of the web.</p>
</div>

CSS Styling

.wrapped-content {
  max-width: 600px; /* Defines the maximum width of the content */
  margin: 30px auto; /* Centers the content on the page */
}

.wrapped-content::before {
  content: ""; /* Initiates the pseudo-element */
  width: 200px; /* Specifies the width of the pseudo-element */
  height: 200px; /* Specifies the height of the pseudo-element */
  margin: 15px; /* Adds margin around the pseudo-element */
  padding: 15px; /* Adds padding within the pseudo-element */
  background: #FBBF24; /* Applies a background color */
  float: left; /* Floats the pseudo-element to the left */
  shape-outside: circle(50%); /* Creates a circular shape for the content to flow around */
  clip-path: circle(50%); /* Trims the content to the defined circular shape */
}

In the above CSS, the ::before pseudo-element is used to create a circular float area on the left side of the text. The shape-outside: circle(50%) declaration defines a circular shape for the text to flow around, with a radius equal to 50% of the pseudo-element's width. The clip-path: circle(50%) then trims the pseudo-element itself to match this circular shape. As a result, the text flows around a circular shape instead of the default rectangular box.

Apart from circle(), shape-outside can use several other functions:

ellipse(): Creates an elliptical shape. The function requires the radii for the x and y-axis of the ellipse and the coordinates to position the center of the shape within its bounding box.
polygon(): Creates a shape with at least three vertices. Each vertex is specified using coordinates, which can be defined in units like pixels, or percentages.
inset(): Forms a rectangular shape with potential inward offsets from each edge of the rectangle. It takes up to five parameters, with the fifth parameter being optional for setting the border-radius to create rounded corners.

Values

The shape-outside property accepts the following values:

Value	Description
`none`	No impact on the float area. Inline content wraps around the margin box of the element as usual.
`<shape-box>`	The float area is determined by the shape of the float element's edges, which can be `margin-box`, `border-box`, `padding-box`, or `content-box` including any curvature resulting from the `border-radius` property.
`<basic-shape>`	The float area is calculated based on the shape created by one of the following functions: `inset()`, `circle()`, `ellipse()`, or `polygon()`. If a `<shape-box>` is provided, it determines the reference box for the `<basic-shape>` function. If not, the reference box will default to `margin-box`.
`<image>`	The float area is determined based on the alpha channel of a designated `<image>`(linked through a URL), following the rules set by the `shape-image-threshold` property.

Associated Properties

shape-margin
shape-image-threshold
clip-path

Tips and Tricks

The shape-outside property only influences the float area of floated elements. Unless the element is floated, applying it will not alter the flow of content.
Leveraging shape-outside with an image, particularly one with an alpha channel, can lead to innovative layouts. For instance, the shape-image-threshold property can be used to adjust the transparency threshold, thus fine-tuning the shape.
Although shape-outside defines the area around which content will flow, it doesn't clip the content to the specified shape. To achieve such an effect, consider using the clip-path property in tandem with shape-outside.
To create dynamic and interactive layouts, it's possible to animate or transition the shapes. More complex interactions might require JavaScript.

Browser Compatibility

For a more detailed breakdown of the respective values, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.