Flexible Rounded Corner

Four Corner image specified as background. Width can be in percentage to achieve flexible width.

by prasun_sultania

HTML

<div class="box">
    <div class="box-outer">
        <div class="box-inner">
            <h2>Headline</h2>
            <p>Content</p>
        </div>
    </div>
</div>

CSS

.box {
    width: 20em;
    background: #effce7 url(http://www.mediafire.com/conv/f85b48dc8ec7b1154b4887a057cc961ad093697bcd8f4c489c39e7fd0fc069d16g.jpg) no-repeat left bottom;
}

.box-outer {
    background: url(http://www.mediafire.com/conv/2a1fda0dd44bbd11aa5241fa82989fc9947a459abfae7e86914904975e324b9f6g.jpg) no-repeat right bottom;
    padding-bottom: 1em;
}

.box-inner {
    background: url(http://www.mediafire.com/conv/e7554adb307210e3a4f9a9d266effb87c196fa1a8367265ae15b4ab97f023f906g.jpg) no-repeat left top;
}

.box h2 {
    background: url(http://www.mediafire.com/conv/3028b9478ae435cae542adb2e129d98fb16475f58ffcf135789b3d6fa82bae586g.jpg) no-repeat right top;
    padding-top: 1em;
}

.box h2, .box p {
    padding-left: 1em;
    padding-right: 1em;
}