Round corners css

HTML & CSS
1

I just wanna share a simple solution for making graphic elements with round corners in css.


div.top {float:left; background:url(img/top.gif) top left no-repeat; width:168px; height:9px; padding:9px 0 0;}
div.middle {float:left; background:url(img.middle.gif) repeat-y; width:158px; padding:5px;}
div.bottom {float:left; background:url(img/bottom.gif) bottom left no-repeat; width:168px; height:9px;}

In my example i have cut a top and bottom with rounded corners that has the width of 168px and a height of 9px.
Then you cut the middle piece of the round corner but - you only need a height of 1px onless the background is gradient of course. And the with of the middle background has to be 168px.

It´s a simple solution what i does the job and it is easy to implement.

The content text/images has to be placed inside div.middle

Hope it will be helpful for some of you

2

Thanks for sharing. It’s similar to methods I’ve seen from other sources for a good while now. Me, I’m just using CSS3 and letting the older browsers go hang. :slight_smile:

3

you are going so web 2.0 :stuck_out_tongue: