The shape-outside property
The shape-outside property allows you to set non-standard wrapping shapes for floating elements.
Adjacent elements will wrap around the specified
shape rather than the rectangular container.
Syntax
selector {
shape-outside: value;
}
Values
| Value | Description |
|---|---|
circle() |
Circular wrapping shape |
ellipse() |
Elliptical wrapping shape |
polygon() |
Arbitrary polygonal shape |
url() |
Shape based on image alpha channel |
margin-box |
Use margin boundaries (default value) |
Example
Let's create a circular wrapping shape
for a floating element.
We'll use the shape-outside property and
clip-path:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
clip-path: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
Example
Let's add spacing using the shape-margin property:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
shape-margin: 10px;
clip-path: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
Example
Without the clip-path property, the text
will wrap around the circle, but the element
won't have a circular shape:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
Example
A different element shape:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 200px;
height: 200px;
background-color: #4CAF50;
float: left;
shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
margin-right: 20px;
margin-bottom: 20px;
}
p {
width: 500px;
text-align: justify;
}
:
Example
A different element shape:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 200px;
height: 200px;
background-color: #4CAF50;
float: left;
shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
margin-right: 20px;
margin-bottom: 20px;
}
p {
width: 500px;
text-align: justify;
}
:
See also
-
the
clip-pathproperty,
which creates the visible shape of an element -
the
floatproperty,
required for shape-outside to work -
the
shape-marginproperty,
which adds spacing around the shape
