Non-overflowing rounded corners

by Mark Heath

HTML

<div class="outer">
<div class="heading">
  Hello World
</div>
<p>
  Lorem ipsum dolor sit amet, vis inimicus qualisque no. Cu modo lucilius pertinax eos, duo exerci iracundia ex. Mel nisl iudico ut. Nec ex explicari efficiantur. In eum vitae utroque, no pri dolore populo gubergren. Quo fabulas platonem referrentur an.

</p>
</div>

CSS

body {
  font-family: sans-serif;
}
.outer {
  border-radius: 20px;
  background-color: white;
  border-color: #408040;
  border-style: solid;
  border-width: 2px;
  overflow:hidden;
}

.heading {
  text-align: center;
  background-color: #80FF80;
  border-bottom: solid #408040 2px;
  color: #408040;
  padding: 4px ;
  font-weight: bold;
}

.outer p {
  margin: 10px;
}