DIV/CSS based Rounded Corners

February 13, 2007 by hejian

Make a DIV/CSS based Rounded Corners is not so difficult, I will make some examples here.

XHTML:

<div class=".module">
<div>
<div>
<div>
the content
</div>
</div>
</div>
</div>

CSS:

div.module-menu {
background: url(images/top.png) no-repeat top;
}
div.module-menu div {
padding: 7px 0px;
background: url(images/bottom.png) no-repeat bottom;
}
div.module-menu div div {
padding: 0px 7px;
background: url(images/middle.png) repeat-y;
}
div.module div div div {
padding: 0px 0px;
width: 161px; /* fix the width for IE */
background: #ffffff; /* reset the background */
}

Leave a Reply

You must be logged in to post a comment.

Wordpress template made by HeJian