Css - How Make My Text Follows The Radius Of My Border

Here the codepen of my current situation: https://codepen.io/joondoe/pen/gJJLPx. I like the typographical design, like the following image: At the bottom right of the above image

Solution 1:

You could potentially use css shape-outside:

.circle{
  width: 10em;
  height: 10em;
  border-radius: 5em;
  background: #accede;
  margin: 1em;
  float: right;
  shape-outside: circle(50%);
}

.content{
  max-width: 500px;
}

<divclass="circle"></div><divclass="content">
Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus euismod odio, a interdum elit venenatis non. Vestibulum molestie nisi sapien, vel egestas risus tristique vitae. Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Nullam ac malesuada magna, id auctor purus. Praesent viverra fermentum odio.
</div>

See https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside for more shapes.