<h1> HAML </h1>
.natural-curves
.natural-curves-inner
…</code>
</pre>
Let your bordered outer div</code> determine the background<sup>1</sup> and its border-radius</code><sup>2</sup> will put a natural curve on the inner div</code>.
If you set the background of the inner div</code>, you will also need to set its border-radius</code><sup>3</sup> and you will lose your natural curves.
<h1>CSS</h1>
.natural-curves {
border: 0.5em solid;
border-radius: 1.5em; /* 2 /
background: lightblue; / 1 */
…
}
.natural-curves-inner {
overflow: hidden;
/* 3 /
/
border-radius: 1em;
background: burlywood;
*/
}</code>
</pre>
Example here:
http://codepen.io/ChrisNager/pen/CFjpK