CSS shape-margin Property

Description

The shape-margin CSS property adds a margin to a shape-outside. This defines a new shape that is the smallest contour (in the shrink-wrap sense) that includes all the points that are the shape-margin distance outward in the perpendicular direction from a point on the underlying shape.

Initial value
0
Applies to
Floats
Inherited
No
Media
Visual
Computed value
as specified, but with relative lengths converted into absolute lengths
Animatable
Yes
CSS Version
Candidate Recommendation
JavaScript syntax
object.style.shapeMargin

Syntax

shape-margin = <length-percentage>

Values

  • <length-percentage>Sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block.

Example

<section>
<div class="shape"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
section {
  max-width: 400px;
}
.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
XX37622410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
3737622410.34.0

Last updated by CSSPortal on: 10th December 2019