CSS: Letting text flow around a round element

Updated . Posted . Visible to the public.

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:

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

Image

Dominik Schöler
Last edit
Dominik Schöler
Attachments
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2024-01-10 12:21)