Rounded Corners using 3 images

Question

Can I club together three images to form a one with CSS? Basically, I need to create rounded corner button and I've three images left, middle and right.

I've used in all the pages and it won't be possible for me to replace it with two or three other HTML controls. So is there any way by which I can combine these images to form one and apply that CSS class to asp:button?

Please don't suggest for border-radius properties as backward support is important here. Thanks in advance

Answer 1

Read Sliding door technique

http://www.alistapart.com/articles/slidingdoors/

http://www.alistapart.com/articles/slidingdoors2/

To create rounded buttons and a lot more using two sliding images from left and right.

Answer 2

The best way would be to modify the HTML for your button. Something like this works well:

<button><span>Click Me!</span></button>

One way I can think of is to inject the <span> into the <button> with javascript after the page has loaded.

Then you CSS that you will need for the <button> and the <span> will do the background images. You may not need 3 images, 2 should suffice, one would be the left end for eg. and another would be a really long right end. Using the sliding doors technique you can make a rounded corner <button>

You could even do this with 1 image, a sprite containing the two images I mentioned above.

This article is excellent: http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/