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!


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).

| improve this answer | |

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.

| improve this answer | |
  • +1 Great written answer. I think CSS rounded corner are faster, because the client have to download the image sprite by doing one more server access. The reason you do an image sprite instead of 2/4 images (one for each corner) is eaxctly to reduce the server accesses, not for the bandwidth. – Marco Demaio Oct 28 '10 at 10:44

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.

| improve this answer | |
  • 2
    The only downside is that CSS rounded corners are still not very cross-browser. They look great almost only on FF. – Marco Demaio Oct 26 '10 at 18:49
  • 1
    That being said, FF, Chrome, Webkit, Opera and IE9 all support rounded corners, so you can implement progressive enhancement right now if you want. To cover all browsers use: -moz-border-radius: ?; -webkit-border-radius: ?; border-radius: ?;. Order doesn't matter for the most part, but border-radius always has to be last. – Gup3rSuR4c Oct 26 '10 at 21:40
  • @Alex: the fast that they support rounded corners, does not mean they look nice. For instance, rounded corners on Safari 4 looks disgusting and NOT anti-alysied when adding borders to HMTL object. – Marco Demaio Oct 28 '10 at 10:33

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.

| improve this answer | |

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.

| improve this answer | |

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.


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.

| improve this answer | |
  • I don't think bandwidth is an issue since rounded corner images are usually less than 1kb. However, it is more bandwidth since, you not only need to download the pixel data for the image corners, but also the pixel data for the corner overlays. Also, for PNG images where the corner data is solid (color or transparent), you actually do reduce the file size by a small amount. That's why a solid white square is smaller than a gradient square. – Lèse majesté Oct 27 '10 at 1:04
  • Yeah, in retrospect, the PNG example about transparency may not have been the best. Ultimately, I was trying to point out it's a game of bytes. And I personally do try to squeeze out as much bandwidth savings as possible, by any means necessary. – Gup3rSuR4c Oct 27 '10 at 1:15
  • Can you correctly tell me the way to round and image by just using CSS, without wrapping it into a division? – Starx Oct 27 '10 at 7:58
  • @Starx, I hope my update above will answer your question. – Gup3rSuR4c Oct 28 '10 at 1:15
  • @Alex, try it yourself first, the images will not be rounded that way. I asked you about images only. – Starx Oct 28 '10 at 5:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.