Layout
shape-outside
shape-outside sets the shape that text flows around next to a floated element. It lets text follow circles, polygons, or the opaque parts of an image instead of a rectangle.
Syntax
none | [ <basic-shape> || <shape-box> ] | <image>
<shape-box> = margin-box | border-box | padding-box | content-boxPreview
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
Presets
Drag the bottom-right corner to resize
Code
.box {
display: block;
}
.box > :nth-child(2) {
float: left;
width: 8em;
height: 8em;
border-radius: 50%;
shape-outside: circle(closest-side);
}Controls
shape-outside<basic-shape>
<basic-shape>circle()
circle()closest-side
Radius
at <position>center center
Click or drag inside the box to move the center
Horizontal
Vertical
<shape-box>margin-box
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
About
Values
none: the initial value. Text flows around the rectangle outside the element's margin.<basic-shape>: text flows around a shape such ascircle(),ellipse(),inset(), orpolygon(). Percentages for the shape's size and position refer to the reference box: the<shape-box>written after it, ormargin-boxif there is none.<shape-box>: uses one of the element's boxes,margin-box,border-box,padding-box, orcontent-box, as the shape. The curve ofborder-radiusis included, so text follows the corners of a rounded element.<image>: uses the parts of an image that are not transparent.shape-image-thresholddecides how transparent counts as transparent. Gradients work as images too. Aurl()image must come from the same origin as the page or be allowed by CORS; otherwise it behaves likenone.
Things to watch
- It only applies to elements floated with
float. It has no effect withfloat: noneor on flex and grid items. - Only the way text flows changes; the element is still drawn as a rectangle. To draw it in the same shape, use
border-radiusorclip-path. - The shape is clipped to the rectangle outside the element's margin. It cannot grow beyond that rectangle to push text farther away.
- Text still flows on one side only. For a
float: leftelement that is the right side; even if the shape leaves room on its left, text does not go there. - The
rect(),xywh(), andpath()shapes only work inshape-outsidein recent browsers (such as Chrome and Edge 149 and later), andpath()does not work in Firefox or Safari yet. This page's controls leave them out.
In the preview, supporting declarations float the second item to the left (float: left) and round it into a circle. Flex and grid items do not float, so the box is kept a plain block (display: block).