Ways to avoid images

Sometimes, you can replace images with html and CSS. This section shows two examples of this rounded corners and utility symbols.

Rounded corners in CSS

Consider the box in the following figure. You could implement the rounded corners with one or more images. However, this means that the browser has to request those images. And if you change the color of the page or the box, you may need to redo the images.

Many browsers already support rounded corners natively. Firefox has the CSS property moz-border-radius (https://developer.mozilla.org/en/css/-moz-border-radius), while Google Chrome supports border-radius, a property introduced in CSS3 (http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius). border-radius is also supported by IE9, but not IE8 or before. This means that unless all your visitors use Firefox, Chrome, or IE9, you'll have to implement rounded corners yourself. Here is how to do this without images.

If you were to zoom in to the top-left...