Rounded Corner

I have not been writing for months now, but anyway I seemed to have forgotten to write about rounded corners.

Basically rounded corners is a CSS3 specification, Firefox and Safari have implemented this on their respective browsers I think the same goes with Konqueror and Opera, but the hack seems to have just flew out of head(okay so I'm a bigot on these two, and I am going to do my best to support them next time).

-moz-border-radius: 5px; (Mozilla Browsers)
-webkit-border-radius:5px (Chrome and Safari Browsers) or -khtml-border-radius: 5px


And to extend it further:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Here is a sample css rule for it:

h2{
font-size:1.75em;
color:#0062A4;
background-color:#C6E8FF;
padding:10px 0 10px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-transform:capitalize;
margin:0 0 10px 0px;
border:#0062A4 1px solid;
}


Here is another way to use this:

-moz-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;


Sources:
http://www.css3.info/preview/rounded-border/
http://buildinternet.com/2009/10/using-rounded-corners-with-css3/