Natural curves

<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