Unemployed Developer

To start off my first blog posting, I will keep it simple with a tutorial on rounded corners via CSS. A Google search brings up multiple ways of doing rounded corners, with images, javascript, css, HTML tables and more. For the sake of simplicity and adapting to the new CSS3 syntax we will look at how to do this with the new option for borders: border-radius.

CSS3 is currently in development, and we can keep an eye on the progress here: CSS3 progress report. Mozila/Firefox, Google Chrome and Safari 3 have adopted the border-radius function. An interesting note is that in mobile browsers there is support for border-radius in the iPhone and any other devices that run the Webkit engine. Where does that leave Internet Explorer? Interestingly enough, Internet Explorer 8 is compliant with the CSS2.1 specification and supports some features of CSS3. However border-radius is not one of them. Are we out of luck for IE, keep reading and you will find out.

To get back on track, we want to create rounded corners on our page via border-radius with CSS3.

Let’s take add the following code to our HTML to obtain rounded corners:

Your css for the html page will contain the following CSS.

[code="css""].round {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;
    background: green;
}[/code]

This is an example of the above code for your convenience:

Of course you notice for the Mozilla Gecko engine.

[code="css""]-moz-border-radius: 5px;[/code]

& for the Webkit engine as previously described.

[code="css""]-webkit-border-radius: 5px[/code]

The above exampled have been using shorthand CSS, which is a cool way to specify several properties in one. Essentially we are telling CSS that we want a 5 pixel radius added to all corners. To expand out of shorthand CSS and specify specific corners we must use the following:

Gecko Engine:

[code="css""]     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright 5px;
     -moz-border-radius-bottomleft 5px;
     -moz-border-radius-bottomright 5px;[/code]

Webkit Engine:

[code="css""]    -webkit-border-top-left-radius 5px;
    -webkit-border-top-right-radius 5px;
    -webkit-border-bottom-left-radius 5px;
    -webkit-border-bottom-right-radius 5px;[/code]

I encourage you to play with these CSS3 functions and apply them to your websites ASAP!

I know I did ask you to keep reading to find out more about rounded corners in Internet Explorer. We can use an HTC behavior file for rounded corner support. HTC is an HTML file that contains a script of HTC specific elements that define the file.

The following Google Code Project details the use of this HTC file to ensure that we can create rounded corners in CSS for Internet Explorer. Curved Corner. This HTC example is a “try at your own risk” as I have not tested it yet. However I will in the near future write another article about how this method works.