Red border model

In the last article, we learn to create the rounded box, what if I want borders around the rectangle?

HTML code:

<div class=”roundedBox” id=”type4″>
<strong>My content in roundedBox Type 4</strong>
<div class=”corner topLeft”></div>

<div class=”corner topRight”></div>
<div class=”corner bottomLeft”></div>
<div class=”corner bottomRight”></div>
</div>

CSS code (add borders to your rounded corners in sprite, also match the background of .roundedBox class and border with sprite)

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}

This is what it looks like. However our corners still can not properly cover #type4. Therefore we must correct their position to cover the previous position style.

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}

Edited By Dan Li