Which is faster, adding rounded corners to images, or adding rounded corners in CSS

Question

Which of the following will load faster,

1. Creating a square image and adding rounded corners via CSS
2. Adding rounded corners to the image by default and not using the extra css.

Also, if 2 is faster, then does that mean that the rounded corners functionality was only added to help programmers who were not capable of creating their own rounded corners in images?

Thanks for any help!
Metropolis

Answer 1

Assuming you are only trying to make a box with rounded corners and nothing else, using CSS should be faster as no images need to be downloaded to make the border with rounded corners be displayed. That means at least one less HTTP request and less data to be downloaded (and less latency as a result).

Answer 2

A while back, I wrote a tutorial on how to create rounded corners using only one image. If you do go that route, I'd recommend including that image as part of a sprite that contains other parts of your layout.

The drawbacks of using an image are that you need to know the background or use extra markup to achieve it. It's also less flexible for updates or changes. The advantages are that it doesn't need JavaScript and it's cross-browser.

The advantages of using CSS3 are that no JavaScript or extra markup is needed. The disadvantages are that it's not cross-browser, rounded edges with borders are highly pixelated, and you have to deal with the browser specific CSS properties in order to get it to work.

Either method should be fast enough for most purposes, though I suspect that CSS3 rounded edges would be slightly faster than using an image. That said, there are considerations other than speed. At this point, even though I've used the image method in the past, I would probably lean toward CSS3.

Answer 3

The (1) is faster rendering, and what's more important is versatile.

CSS is faster because when using CSS you won't even need to download image/images; you can for instance apply rounded corners to a div block with a white background.

But the most important reason is to be versatile; if you change your mind about div block showing rounded corners, it takes nothing to adjust CSS and remove rounded corners or change their colors or reduce their radius. If you did rounded corners with images you might need to open Photoshop, redesign the rounded corners, cut them off in slices and place them back into the website layout.

Answer 4

If there is any difference between them it will be so small it's absolutely not worth considering.

As for your second question, the point of CSS is to separate presentation from code. Let's say you're using images with rounded corners on your site, you decide to redesign and these rounded images don't really fit with your new layout. Would you rather change one line in your stylesheet, or regenerate all of your images to remove the rounded corners?

The only reason border-radius is not widely used is a lack of support in Internet Explorer. Hopefully things will be better when IE9 is released properly and gets some market share.

Answer 5

Actually there are 3 choices.

1. Use CSS to create the rounded edges
2. Use CSS to create rounded edges with rounded corner images
3. Use an AJAX function to create rounded corners

The issue with 1 is that most browsers do not support it or support different formats. IE6-IE8 specifically has a lot of issues. I believe this should be resolved once all browsers supposrt CSS3 fully but that is a long time off.

The issue with option 2 is that you lose some load time to downloading the images. To do it really well you need to know the width of your boxes. Finally IE6 will still handle it poorly because it can't handle .PNG files very well, which are required for option 2.

Finally, the issue with option 3 is it can take some time to tweak everything to work as you would like and it might be slightly slower. I have used option 3 many times and I have not been able to to notice the difference in loading time.

Answer 6

You can round an image with CSS, but (correction per conversation with @Starx) You can't round an image with CSS and it wouldn't give you a benefit anyway because you are only masking sections of the image. The bytes that are hidden are still there and they still have to be transferred to the user's browser, so you don't have a bandwidth benefit even if it is a transparent PNG.

Furthermore, you will be hurting your self (ever so little) because in your style sheet, the code you'll have to write to perform the effect will actually add overhead to your style sheet. Thus you will actually be adding more data to be transferred to the browser and increasing your bandwidth usage.

Option 2 in your question is more appropriate when dealing with images. As far as why the rounded corners was added to CSS, it has nothing to do with images and programmers [sucking with PS...]. Some of the uses you may see are someone trying to replicate the roundness of the Apple input fields/buttons on their page. Or another example would be div's that need to act as panels or modals.

Really, there's no defined usage, it's just a matter of convenience on whatever you're working with.

UPDATE

The CSS needed to round an object across all browsers that support rounding:

-moz-border-radius: ?px;
-webkit-border-radius: ?px;
border-radius: ?px;

border-radius has to be last because that is the proper property by specification. For more details, please go here.