Simply this is like the repetition of same technique used by many css coders out there. The real basic where it starts of how to apply rounded corners using css3.
Using simple -webkit-border-radius or -khtml-border-radius properties, we can get rounded corners without using any image at all.
Straight to the Point
For example, code below will return 5 pixel border radius corner to all.[sourcecode language=’css’]
While this one will give only top corners rounded.[sourcecode language=’css’]
-moz-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
It will look like image below:
The bad news is that not all browsers can support this feature. You can try view demo below in different browsers to see it live or follow this useful site that states a complete table on the browsers compatibility. Read more why it is so.
Use the downloaded file below for testing. Open it using you favorite css editor and keep different combination. Of course it is very simple. But, why not strengthen it? Have fun!