<div class="wrapper">
<p class="box1">
Donec consequat pellentesque odio, rhoncus auctor quam venenatis eu. Fusce varius ipsum id nibh aliquet, sed pellentesque risus consequat. Nam porta nibh nisl, at sagittis justo elementum id.
</p>
<p class="box2">
Suspendisse et lorem vulputate, lacinia nisi eu, hendrerit tortor. Etiam tellus lectus, sollicitudin at neque eget, tristique fringilla augue.
</p>
<p class="box3">
Nam sollicitudin ullamcorper pretium. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="box4">
Quisque vestibulum neque nisl, vel tempus tortor tincidunt nec. Fusce nec egestas enim. Proin id nibh at purus luctus dictum vitae in mi. Nullam posuere ac elit et egestas.
</p>
</div>
.wrapper {
padding: 10px;
display: flex;
flex-wrap: wrap;
}
p {
background: #efefef;
border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
padding: 4%;
width: 260px;
margin: 10px;
}
.box1 {
border: 2px solid #333;
}
.box2 {
border: 6px solid #333;
}
.box3 {
border: 2px dashed #333;
}
.box4 {
border: 2px dotted #333;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.