How can I ensure that text is inside rounded div?

Question

I want to have my round div to keep the text inside it. like you see on the image

<

Answer 1

This is an extension of @G-Cyr answer where I will consider a different syntax and less code. I will also rely on shape-margin to define the padding of the text instead of using complex calculation inside the gradient.

div.box {
  --s:9em;  /*Size of the circle */
  --p:0px;  /*padding*/

  text-align:justify;
  height: var(--s);
  width: var(--s);
  border-radius: 50%;
}

.box >div {
  height:100%;
}

.box:before,
.box >div:before {
  content: '';
  float: left;
  height:100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at var(--d,right), transparent 100%, red 0);
  shape-margin:var(--p);
}

.box >div:before {
  float: right;
  --d:left;
}

/* Irrelevant styles*/
body {
  background: #399;
  margin: 0;
}

div.box {
  background: #333;
  color:#fff;
  display:inline-block;
  vertical-align:middle;
  margin:5px;
  font-size:20px;
}

 
 Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. cies. dolor ipsum



 
 Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Lorem ipsum