If you have an element with significant border-radius (e.g. 50% for a circle) and you want inline content (i.e. text) to flow around it, do it like this:

• Place the element right before the text and float: right or float: left
• Tell the browser to take the content-box for the element's shape Show archive.org snapshot , i.e. without margin, padding and border. shape-outside: content-box
• Set the margin where you want it, e.g. 10px left and bottom
• Set the shape-margin to the same size as the margin. Note that the shape-margin Show archive.org snapshot can never exceed the (rectangular) margin-box of an element!

  --margin: 10px;
  shape-outside: content-box;
  margin-left: var(--margin);
  margin-bottom: var(--margin);
  shape-margin: var(--margin);

Opscomplete powered by

Save money by migrating from AWS to our fully managed hosting in Germany.

• Trusted by over 100 customers
• Ready to use with Ruby, Node.js, PHP
• Proactive management by operations experts

Read more Show archive.org snapshot