CSS shape-outside Property

❮ Previous Reference Next ❯

Example

.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;
}
Try this code ❯

Meaning:

The shape-outside CSS 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 simple boxes.

Default value:none
Inherited:No
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.shapeOutside="none|margin-box|border-box|padding-box|content-box|basic-shape|image|initial|inherit|revert|revert-layer|unset";


Standard Syntax

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|image|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
none The float area is unaffected. Inline content wraps around the element's margin box, like usual.
margin-box Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding 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 The float area is computed based on the shape created by of one of inset(), circle(), ellipse(), polygon() or, as added in the level 2 specification, path(). 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 The float area is extracted and computed based on the alpha channel of the specified image as defined by shape-image-threshold.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  shape-outside: none;
}
❮ Previous Reference Next ❯