Efficiency vs Simplicity

For the Pre-Vet site that I recently finished, I used images because IE doesn't play with rounded corners. But I took the easy method and just made 9 images, one for each color, each image something like 700 by 500 px each. This made for simple coding. but it's terribly inefficient, because of how much bandwidth the images use. It's acceptable to me because simple is more important than efficient, since the person taking over after me has no web experience, and the person after her might not as well (the site being for a club with changing student webmasters).

However, in the future I may need to work with rounded corners on a site where bandwidth is important, and also where the box needs to be resizable. The method I'm thinking of would be a composite. Using an image for the inner and outer corner, and making the inside of the box resizable. Hopefully I can have the browser flip the image so I can use the same pair for all 4 corners.

I've got 4 hours left at work today, so this shall be my goal. Updates to follow.

Edit (3:47 pm): IE as usual sucks. My original goal was to use two images, one for the inner circle, and one for the outer. But IE can't use the transform:rotate css style. There's a special rotate, but when used, it turns all transparent pixels to black, which adds what appears to be a 1px thick black border around the image. So I had to rotate and make 4 copies of each image, which pushes the total image size from 6KB to 24 KB. This still blows 69KB (the previous number) out of the water though.

And the thing is, I could just put in two different CSS files, one for IE, and the other for all the rest. The rest can use border-radius, and so have 0KB. The ultimate!