CODEWITHSUNDEEP
htmlcss
Diagathe Josué
Diagathe Josué

Reputation: 11986

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, you can see the text following the border of the picture here, so a rounded box I assume

At the bottom right of the above image, you can see the text following the border of the picture here, so a rounded box I assume

I would do the same with my css but it fails. So far the text overflows the borders.

Here my snippet: 

.round_box{
  width:30%;
  margin:auto; 
  text-align:left;
  border: solid blue;
  border-top-right-radius: 40%;
  border-bottom-right-radius:  40%;
}
<div class="round_box" >
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div>

Upvotes: 0

Views: 321

Answers (1)

Stuart
Stuart

Reputation: 6795

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;
}
<div class="circle"></div>
<div class="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.

Upvotes: 3

Related Questions