shape-outside
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Theshape-outsideCSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box;shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than rectangular boxes.
Try it
shape-outside: circle(50%);shape-outside: ellipse(130px 140px at 20% 20%);shape-outside: url("/shared-assets/images/examples/round-balloon.png");shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);<section> <div> <img src="/shared-assets/images/examples/round-balloon.png" width="150" /> We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o’clock. This athletic young Frenchman belongs to a small set of Parisian sportsmen, who have taken up “ballooning” as a pastime. After having exhausted all the sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth. </div></section>.example-container { text-align: left; padding: 20px;}#example-element { float: left; width: 150px; margin: 20px;}Syntax
/* Keyword values */shape-outside: none;shape-outside: margin-box;shape-outside: content-box;shape-outside: border-box;shape-outside: padding-box;/* Function values */shape-outside: circle();shape-outside: ellipse();shape-outside: inset(10px 10px 10px 10px);shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);/* Shape box with basic shape */shape-outside: circle() border-box;shape-outside: margin-box ellipse();/* <url> value */shape-outside: url("image.png");/* <gradient> value */shape-outside: linear-gradient(45deg, white 150px, red 150px);/* Global values */shape-outside: inherit;shape-outside: initial;shape-outside: revert;shape-outside: revert-layer;shape-outside: unset;Theshape-outside property is specified using the values from the list below, which define thefloat area forfloat elements. The float area determines the shape around which inline content (float elements) wrap.
Values
noneThe float area is unaffected. Inline content wraps around the element's margin box, like usual.
<shape-box>The float area is computed according to the shape of a float element's edges (as defined by theCSS box model). This can be
margin-box,border-box,padding-box, orcontent-box. The shape includes any curvature created by theborder-radiusproperty (behavior which is similar tobackground-clip).margin-boxDefines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding
border-radiusandmarginvalues. If theborder-radius / marginratio is1or more, then the margin box corner radius isborder-radius + margin. If the ratio is less than1, then the margin box corner radius isborder-radius + (margin * (1 + (ratio - 1) ^ 3)).border-boxDefines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.
padding-boxDefines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.
content-boxDefines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of
0orborder-radius - border-width - padding.
<basic-shape>The float area is computed based on the shape created by an
inset(),circle(),ellipse(), orpolygon()function; other<basic-shape>functions are invalid. If a<shape-box>is also supplied, it defines the reference box for the<basic-shape>function. Otherwise, the reference box defaults tomargin-box.<image>The float area is extracted and computed based on the alpha channel of the specified
<image>as defined byshape-image-threshold.
Note:If the image is invalid, the effect is as if the keywordnone had been specified. Additionally, the image must be served withCORS headers allowing its use.
Formal definition
| Initial value | none |
|---|---|
| Applies to | floats |
| Inherited | no |
| Computed value | as defined for<basic-shape> (with shape-box following, if supplied), the <image> with its URI made absolute, otherwise as specified. |
| Animation type | yes, as specified for<basic-shape>, otherwise no |
Formal syntax
shape-outside =
none|
[<basic-shape>||<shape-box>]|
<image>
<shape-box> =
<visual-box>|
margin-box|
half-border-box
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<visual-box> =
content-box|
padding-box|
border-box
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Examples
Funneling text
HTML
<div> <div></div> <div></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 { background-color: lightgray; height: 12ex; width: 40%;}.left { clip-path: polygon(0 0, 100% 100%, 0 100%); float: left; shape-outside: polygon(0 0, 100% 100%, 0 100%);}.right { clip-path: polygon(100% 0, 100% 100%, 0 100%); float: right; shape-outside: polygon(100% 0, 100% 100%, 0 100%);}p { text-align: center;}Result
Specifications
| Specification |
|---|
| CSS Shapes Module Level 1 # shape-outside-property |