This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The shape-outside
CSS property defines a shape around which inline content should wrap. By default, inline content wraps around its margin box.
/* 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); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* Global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset;
Initial value | none |
---|---|
Applies to | floats |
Inherited | no |
Media | visual |
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 |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
The shape-outside
property is specified using the values from the list below, which define the float area for float elements. The float area determines the shape around which inline content (float elements) wrap.
none
<shape-box>
margin-box
, border-box
, padding-box
, or content-box
. The shape includes any curvature created by the border-radius
property (behavior which is similar to background-clip
).margin-box
border-radius
and margin
values. If the border-radius / margin
ratio is 1
or more, then the margin box corner radius is border-radius + margin
. If the ratio is less than 1
, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3))
.border-box
Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.
padding-box
Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.
content-box
Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0
or border-radius - border-width - padding
.
<basic-shape>
inset()
, circle()
, ellipse()
, or polygon()
. If a <shape-box>
is also supplied, it defines the reference box for the <basic-shape>
function. Otherwise, the reference box defaults to margin-box
.<image>
<image>
as defined by shape-image-threshold
.shape-outside
value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none
had been specified.none | <shape-box> || <basic-shape> | <image>where
<shape-box> = <box> | margin-box
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>where
<box> = border-box | padding-box | content-box
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<fill-rule> = nonzero | evenodd
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
When animating between one <basic-shape>
and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as <length>
, <percentage>
, or calc()
where possible. If list values are not one of those types but are identical (such as finding nonzero
in the same list position in both lists), those values do interpolate.
ellipse()
or circle()
, and none of the radii use the closest-side
or farthest-side
keywords, interpolate between each value in the shape functions.inset()
, interpolate between each value in the shape functions.polygon()
, both polygons have the same number of vertices, and use the same <fill-rule>
, interpolate between each value in the shape functions.<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; }
Specification | Status | Comment |
---|---|---|
CSS Shapes Module Level 1 The definition of 'shape-outside' in that specification. | Candidate Recommendation | Initial definition. |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 37 | ? | 531 2 | No | 24 | 8 -webkit- |
<gradient> |
? | ? | No | No | No | ? |
inset() |
? | ? | 543 | No | No | ? |
polygon() |
? | ? | 554 | No | ? | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | 531 2 | No | 24 | 8 -webkit- |
<gradient> |
No | ? | ? | No | No | ? | ? |
inset() |
No | ? | ? | 543 | No | No | ? |
polygon() |
No | ? | ? | 554 | No | ? | ? |
1. Firefox only supports values <shape-box>
, circle()
, and ellipse()
.
2. From version 53: this feature is behind the layout.css.shape-outside.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
3. From version 54: this feature is behind the layout.css.shape-outside.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
4. From version 55: this feature is behind the layout.css.shape-outside.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-box