CSS Rounded Corners example - redmelon.net

CSS Rounded Corners example - redmelon.net


A Demo page showing sample HTML code and VIew Source shows the CSS

This is the essential CSS:

/* set background images for corners */
.rbroundbox {
background: url(simple_background.gif)
repeat;
}
.rbtop div {
background: url(simple_top_left.gif)
no-repeat top left;
}
.rbtop {
background: url(simple_top_right.gif)
no-repeat top right;
}
.rbbot div {
background: url(simple_bottom_left.gif)
no-repeat bottom left;
}
.rbbot {
background: url(simple_bottom_right.gif)
no-repeat bottom right;
}

/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%; height: 14px; font-size: 1px;
}
.rbcontent { margin: 0 14px; }
.rbroundbox { width: 20em; margin: auto; }

and HTML:

[div class="rbroundbox"]
[div class="rbtop"][div][/div][/div]
[div class="rbcontent"]
[h2]Header[/h2]
[p]Text here my love.[/p]
[/div]
[div class="rbbot"][div][/div][/div]
[/div]