Wrapping text inside a circular shape

#css #html #webdev

^{Find out more CSS tricks at css-tip.com}

Yes, we are going to make a text wrap perfectly inside a circular shape. No JS, no SVG, no external plugin. Only few lines of CSS and a basic HTML structure.

Let's go!

Explanation

<div class="box">
  <i></i> 
  Lorem ipsum ..
</div>

div.box {
  --s:450px;  /*Size of the circle */
  --p:15px;  /* padding */

  height: var(--s);
  width:  var(--s);
  border-radius: 50%;
}
.box i,
.box::before {
  content: '';
  float: left;
  height:100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
}
.box i {
  float: right;
  shape-outside: radial-gradient(farthest-side at left,  transparent calc(100% - var(--p)), #fff 0);
}

[box]

A basic div element having width=height and border-radius:50% to create a visual circle. I said "visual" because it's not the one that will make our text wrap around.

[i] & [box::before]

Two floating elements covering the whole div (full height and half width for each one) where we apply shape-outside to create half a circle inside each one. Below an illustration to better understand

The red element floating to the left will have half a circle on its right and the blue one will simply have the opposite. We adjust the radius of the circle using the variable p to simulate padding with the visual circle created by box.