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
X	79	37	62	24	10.1
Tablets / Mobile
37	37	62	24	10.3	3.0

Last updated by CSSPortal on: 8th December 2019