CSS shape-outside Property


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
Applies to
Computed value
as defined for <basic-shape> (with <shape-box> following, if supplied); else the computed <image>; else the keyword as specified
JavaScript syntax


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


  • 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.


<div class="main">
<div class="left"></div>
<div class="right"></div>
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.
.main {
  width: 530px;
.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

The following table will show you the current browser support for the CSS shape-outside property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023