CSS shape-outside Property

Description

The shape-outside CSS property is used to control the flow of text content around a non-rectangular shape, such as an image or a floated element. It allows web designers to create visually engaging layouts by defining a custom shape that determines how adjacent text or content wraps around it. By specifying values like circles, polygons, or even complex paths, designers can achieve more fluid and artistic text wrapping, improving the overall aesthetics and readability of web pages. This property is particularly useful for creating magazine-style layouts or adding creative touches to web designs.

Initial value: none
Applies to: Floats
Inherited: No
Computed value: as defined for <basic-shape> (with <shape-box> following, if supplied); else the computed <image>; else the keyword as specified
Animatable: Yes
JavaScript syntax: object.style.shapeOutside

Syntax

shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>

Values

noneThe float area is unaffected.
<basic-shape>The shape is computed based on the values of one of inset, circle, ellipse or polygon. If shape-box is not supplied, then the reference box defaults to margin-box.
<shape-box>The shape is defined by the CSS Box Model of the element the shape is applied to: margin-box, border-box, padding-box or content-box
<image>If <image> references an image, the shape is extracted and computed based on the alpha channel of the image as defined by shape-image-threshold. If <image> does not reference an image or if the fetch attempt results in any error such that there is no fallback image, the effect is as if the value auto had been specified.

Example

HTML

<div class="main">

  <div class="left"></div>

  <div class="right"></div>

  <p>

    Sometimes a web page's text content appears to be

    funneling your attention towards a spot on the page

    to drive you to follow a particular link. Sometimes

    you don't notice.

  </p>

</div>

CSS

.main {
  width: 530px;
}
.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}
.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
p {
  text-align: center;
}

Result

Editor