Rounded Corners for Website or Blog

Thanks to The Art of Web, I have learned how to make rounded corners for my blog, without images or JavaScript, using a simple set of codes with the CSS border-radius properties that work on Firefox, Chrome, Opera, Safari, iPad and iPhone except Internet Explorer.

To make rounded corners for your website or blog, the trick is to add the following CSS border-radius codes to your template.
  • Firefox: -moz-border-radius
  • Safari, iPhone & iPad: -webkit-border-radius
  • Opera: border-radius
  • Google Chrome: -goog-ms-border-radius
Just add a value for the "effect" and place the code in your template.

-moz-border-radius-topright: 1em;
-moz-border-radius-topleft: 1em;
border-top-right-radius: 1em;
border-top-left-radius: 1em;
-moz-border-radius-bottomright: 1em;
-moz-border-radius-bottomleft: 1em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
-webkit-border-top-right-radius: 1em;
-webkit-border-top-left-radius: 1em;
-webkit-border-bottom-right-radius: 1em;
-webkit-border-bottom-left-radius: 1em;
-goog-ms-border-top-right-radius: 1em;
-goog-ms-border-top-left-radius: 1em;
-goog-ms-border-bottom-right-radius: 1em;
-goog-ms-border-bottom-left-radius: 1em;

For example, you wanted a rounded corner for your sidebar:

#sidebar .widget {
margin: 0px 0px 2px 0px;
padding: 10px 10px 8.8px 10px;
border: 1px solid $sidebar1BorderColor;
-moz-border-radius-topright: 1em;
-moz-border-radius-topleft: 1em;
border-top-right-radius: 1em;
border-top-left-radius: 1em;
-moz-border-radius-bottomright: 1em;
-moz-border-radius-bottomleft: 1em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
-webkit-border-top-right-radius: 1em;
-webkit-border-top-left-radius: 1em;
-webkit-border-bottom-right-radius: 1em;
-webkit-border-bottom-left-radius: 1em;
-goog-ms-border-top-right-radius: 1em;
-goog-ms-border-top-left-radius: 1em;
-goog-ms-border-bottom-right-radius: 1em;
-goog-ms-border-bottom-left-radius: 1em;
}

Sample 1
Adjust the CSS border-radius by replacing the value. You can also omit specific CSS border-radius codes to eliminate the effect. For example, we will eliminate the rounded corner at the bottom:

#sidebar .widget {
margin: 0px 0px 2px 0px;
padding: 10px 10px 8.8px 10px;
border: 1px solid $sidebar1BorderColor;
-moz-border-radius-topright: 1em;
-moz-border-radius-topleft: 1em;
border-top-right-radius: 1em;
border-top-left-radius: 1em;
-webkit-border-top-right-radius: 1em;
-webkit-border-top-left-radius: 1em;
-goog-ms-border-top-right-radius: 1em;
-goog-ms-border-top-left-radius: 1em;
}

Sample 2
This is just a basic tutorial. If you would like to understand more about the -moz-border-radius and CSS border-radius properties, click here.