CSS shape-outside Property

Description

The shape-outside property defines a shape around which text should be wrapped, with possible modifications from the shape-margin property. The shape defined by shape-outside and shape-margin changes the geometry of a float element's float area.

Initial value
none
Applies to
Floats
Inherited
No
Media
Visual
Computed value
as defined for <basic-shape> (with <shape-box> following, if supplied); else the computed <image>; else the keyword as specified
Animatable
Yes
CSS Version
Candidate Recommendation
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

<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>
.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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
XX37622410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
3737622410.34.0

Last updated by CSSPortal on: 8th December 2019