Pro HTML5 and CSS3 Design Patterns

CHAPTER 14 ■ IMAGES

Rounded Corners

HTML

<div class="bg"><div class="tl"><div class="br pad">

You can nest two divisions to create two opposite rounded corners.

</div></div></div>

<div class="bg"><div class="tr"><div class="bl pad">

You can nest two divisions to create two opposite rounded corners.

</div></div></div>

<div class="bg">

<div class="tl"><div class="br"><div class="trc"><div class="blc pad">

You can nest four divisions to create four rounded corners.

</div></div></div></div></div>

<div class=”mbg pad”>You can have a single division with multiple backgrounds</div>

CSS

.bg { background:url("bg.gif") bottom left repeat-x white; margin-top:20px; }

.tl { background:url("rc.gif") top left no-repeat; }

.br { background:url("rc.gif") bottom right no-repeat; }

.tr { background:url("rc.gif") top right no-repeat; }

.bl { background:url("rc.gif") bottom left no-repeat; }

.trc { background:url("rc-trc.gif") top right no-repeat; }

.blc { background:url("rc-blc.gif") bottom left no-repeat; }

.pad { padding:10px; }

.mbg{ background: url("rc-trc.gif") top right no-repeat, url("rc-blc.gif") bottom left no-

repeat, url("rc.gif") top left no-repeat, url("rc.gif") bottom right no-repeat, url("bg.gif")

bottom left repeat-x white; margin-top:20px; }