Rounded Corners

Originally Posted by mark. It doesn't even work in chrome, so a bit of useless code until all the browsers catch up.

Chrome uses webkit.

Originally Posted by sfreitas Which is the best and correctly way of doing rounded corners? Some websites say with images others without images and using only CSS.. Thanks

Depends on the design itself. Sometimes you can get away with semantic and clean markup while others has to be fluid and expandable in all directions, thats a ***** when it also has to have transparancy and some js animation inside and work in every single browser (I know i've just done it , and the markup is awful :P)

So to answer your question. NO! there is no correct way in general to code rounded corners.

I still do not see what's so wrong with using images?
It's the simplest and most compatible method.

You only need the transparency for certain designs if you would like it to look neat on top of a background, but either way it's still an image and doesn't take long at all.

It might delay the loading time by 0.02 milliseconds if you are that fussy.

Why don't you use this? Better than using css3

You need to use PNG with transparency because where ever you place it on the page, you don't want a background color where the rounded part is showing up. And GIF is being replaced by PNG anyway so that's why you use PNG.

Also I read somewhere (not sure I remember where now) but using CSS is not always a great option as certain browsers do not render CSS correctly. IE has problems rendering site with css properly so on some browsers the css rounded corners would not even have an effect or show up. Its always best to do it in images using transparent png's as suggested before hand.

It's not available in all browsers yet, but -moz-border-radius and -webkit-border-radius.

use photoshop to draw rectangles with rounded corner

I've never heard of using CSS for rounded corners. I'm sure it would be time-consuming and wouldn't be compatible with all browsers.

Just use images. It doesn't slow the site down much.. If any. Just draw a rounded box in Photoshop or whatever program you're using, make the white part transparent and save it.

It's rather simple and quick.

I'd just stick with images.

If they're small, say 20x20 and only a few colours at most, then they'll load in no time.

It can be done with CSS - creating a stack of layers, center aligned to each other, each being 2px shorter than that below it, will create a rounded effect. I did this once but it messed up in other browsers.

Small images won't hurt, at all. And will save you time.