How to Wrap Text Around a Circle With CSS

How to wrap a paragraph text block around a circular element with CSS.

If you want to make your content presentation a bit more interesting, and magazine-ish, you can use CSS to make your text align and wrap against elements in interesting ways.

First let’s add some HTML content:

<article class="post">
  <img
    class="circle"
    src="https://www.fwz-elektrotechnik.de/wp-content/uploads/2014/11/Globus-Wikipedia-Kopie-1.png"
    alt="A globus"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    praesentium aliquid quam ut sint explicabo praesentium aliquid quam ut sint
    voluptas omnis, quis, est vitae?
  </p>
</article>

Notice that the <article> element has a class called post and the <img> element has a class called .circle.

Now add the following CSS:

.post {
  max-width: 800px;
  margin: 3rem auto;
}

.circle {
  float: right;
  height: 30vw;
  margin-left: 1rem;
  margin-left: calc(1rem + 2vw);
  object-fit: cover;
  shape-outside: circle(50%);
  width: 30vw;
}

The result should look like this:

A text block wrapping around an image of a sphere

Not bad, huh?

The “magic” comes from the shape-outside CSS property which is supported in all the newest browsers — but not in Internet Explorer.


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on