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: rightorfloat: left - Tell the browser to
take the
content-boxfor the element's shape Show archive.org snapshot , i.e. without margin, padding and border.shape-outside: content-box - Set the
marginwhere you want it, e.g. 10px left and bottom - Set the
shape-marginto the same size as themargin. Note that the shape-margin Show archive.org snapshot can never exceed the (rectangular)margin-boxof an element!
--margin: 10px;
shape-outside: content-box;
margin-left: var(--margin);
margin-bottom: var(--margin);
shape-margin: var(--margin);
Posted by Dominik Schöler to makandra dev (2024-01-10 12:21)