Shape

The shape-* properties define how text should wrap around objects.

Shape Properties

shape-outside

Defines a shape outline (which may be non-rectangular) around which inline content should wrap. Possible values:

• none — inline content wraps around margin-box like usual (default)
• a shape box — e.g. margin-box, border-box, padding-box, content-box
• a basic shape — see basic shape data type, e.g. circle(...), ellipse(...), polygon(...)
• an image — see image data type; it will use the image's alpha channel to determine the outline shape, which can be customized further via shape-image-threshold property

<div id="shape-outside-example">
  <img src="/res/web/css/shape-round-balloon.png">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vestibulum interdum accumsan nunc vitae finibus.
  In lacinia lacinia ipsum, eu eleifend odio vestibulum vitae.
  Vestibulum tempor, odio id dignissim vestibulum.
  Aenean faucibus, ex sed dictum pharetra, ante libero ornare sapien.
  Et consequat orci dolor ut risus. Curabitur quis libero arcu.
  Vivamus dolor magna, pretium semper arcu eget, congue porta enim.
</div>

#shape-outside-example img {
  float: left;
  shape-outside: url('/res/web/css/shape-round-balloon.png');
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum accumsan nunc vitae finibus. In lacinia lacinia ipsum, eu eleifend odio vestibulum vitae. Vestibulum tempor, odio id dignissim vestibulum. Aenean faucibus, ex sed dictum pharetra, ante libero ornare sapien. Et consequat orci dolor ut risus. Curabitur quis libero arcu. Vivamus dolor magna, pretium semper arcu eget, congue porta enim.

shape-image-threshold

Sets the alpha channel threshold for the image specified in shape-outside, which will be used to extract the image shape.

Specify a value between 0.0 and 1.0 (inclusive).

shape-margin

Sets the margin between shape-outside outline and the inline content.

Specify a length or a percentage (relative to the container's width). (This "margin area" won't extend past the image's margin-box. It will simply behave like shape-outside: none if you supply a large enough value.)

Assets

• Round balloon (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside — https://interactive-examples.mdn.mozilla.net/media/examples/round-balloon.png

References

• shape-outside (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
• shape-image-threshold (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold
• shape-margin (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin