<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.