Fallback images for Border Radius - html

Question

I am using border-radius for buttons throughout a page that I am developing. In IE8 since the border radius isn't supported, the buttons show up as rectangles instead of rounded rectangles. To help rectify this, I've added a background image in hopes for it to fallback to it in the case of when it is IE8. This seems to pose two problems:
1) It doesn't fall back to the image, the background-color seems to still override the image
2) In newer browser versions of Chrome, etc, it doesn't show the border-radius, it defaults to the background image.
See this fiddle for CSS for Chrome/Safari/Firefox: http://jsfiddle.net/s33Mb/
<a href="download.html" class="download-button">
<div class="now">DOWNLOAD NOW</div>
<div class="arrow-right"></div>
</a>
.download-button {
background-color:#1c9aca;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
width: 133px;
height: 25px;
text-decoration:none;
}
.now {
width:109px;
position:absolute;
font-family:Arial;
font-size:12px;
font-weight:bold;
position:absolute;
bottom: 5px;
left: 18px;
color:#ffffff;
}
.arrow-right {
width: 0px;
height: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #fff;
position: absolute;
bottom: 7px;
left: 8px;
}
Fiddle attempt for IE: http://jsfiddle.net/MZ72w/ - which you can see in chrome/safari/firefox it is only showing the background image now, but in IE it shows a square rectangle.
In my header I also have:
<!--[if IE 9]> <link href="css/ie9.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if IE 8]> <link href="css/ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if IE 7]> <link href="css/ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->
I have tried to add the download-now selector to these style sheets, but IE doesn't seem to list. Any light on either of these subjects would be great!