サンプルソース

HTML

<div id="content">

<div class="section">
<h2>ソース</h2>
<h3>HTML</h3>
<pre>
ソース
</pre>
<h3>CSS</h3>
<pre>
ソース
</pre>
</div>

<div class="section">
<h2>hoge</h2>
<p>foo, bar!</p>
</div>

</div>

CSS

#content {
    background: #000;
    color: #eee;
}

h2 {
    padding: 1em;
    background: #fff;
    color: #333;
}

#content::before,
#content::after,
h2::before,
h2::after {
    line-height: 0;
    display: block;
}

#content::before {
    content: url("/image/appendix/round-box/white-tl");
    background: transparent url("/image/appendix/round-box/white-tr") right top no-repeat;
    color: inherit;
}

#content::after {
    content: url("/image/appendix/round-box/white-bl");
    background: transparent url("/image/appendix/round-box/white-br") right bottom no-repeat;
    color: inherit;
}

h2::before {
    content: url("/image/appendix/round-box/black-tl");
    margin: -1em -1em 0em;
    background: transparent url("/image/appendix/round-box/black-tr") right top no-repeat;
    color: inherit;
}

h2::after {
    content: url("/image/appendix/round-box/black-bl");
    margin: 0em -1em -1em;
    background: transparent url("/image/appendix/round-box/black-br") right bottom no-repeat;
    color: inherit;
}

hoge

foo, bar!