CSS 3 Rounded Corners Are Gold !!!!!

vinyl
Creative Commons License photo credit: midi8

Readers here at Dreamweaver Spot will have noticed that there have been a few changes to the design over the last week. I have been playing around with a few new things that are coming out in the new CSS 3 Web Standard which at some stage will take over from the current CSS 2.

Let me tell you there are some great enhancements that I am exited about and the one that tickles my fancy at the moment is the ease at which rounded corners can now be created. For me when learning CSS getting rounded corners to work they way you wanted them to I found was a pain the the butt.

CSS 3 introduces a range of new things that you can do with borders, including gradients, shadows and border images. If you take a look at the Navigation Bar at the top, if you are using a modern browser like Fire Fox then you will notice that the corners are rounded, but if you a browser, lets say Internet Explorer 7 it degrades OK and just displays as a normal square corner. But with the imminent release of IE 8 it should work.

Have a look at the code below and there are no images or special spans or anything like that just a couple of extra lines of code to the CSS. I love it!!!

#navbar{
height:35px;
background-color:#191D26;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Try it out for yourself and let me know how things go….I would love to hear from you.

If you want to check out a good series of articles on CSS 3 then head over to Design Shack and check out their articles on it

Daniel Anderson
CSS 3 Fan


| del.icio.us | Digg it | Furl | reddit | StumbleUpon | Yahoo MyWeb

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.

AddThis Social Bookmark Button

Fireworks CS4 468X60

One Response to “CSS 3 Rounded Corners Are Gold !!!!!”

  1. I was able to use the border-radius properties to great effect in a new design. Of course we had to support IE though. I wrote up the technique, which allows border-radius for low overhead round corners in Safari and Firefox, while falling back to corner images using alternate CSS for IE. Works well!

    http://www.bestinclass.com/blog/2008/simple-rounded-corners-with-css3-box-radius-and-fallback-for-ie/

Leave a Reply