Need help customizing an html form input button

I need to know if its possible to customize an html form input button. I would like to be able to make the corners round. I can round off one side using a background image but am unable to round off the other side. Below is my css using an image to round off the left side. The image is approx 300 px wide to allow different lengths of text.

Any suggestions would be greatly appreciated.

Thanks!
Stephen



CSS:

input.btn {
cursor:hand;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
padding:2px 4px 2px 4px;
background: transparent url('button_bg.gif') no-repeat;
border:none;
margin:0 0px 0 0px;
height:25px;
border-radius:20;
}

You have to add some kind of units to your border-radius declaration, i.e., border-radius:20px;

Whoop...my bad. The radius was my attemp to see if it might work with IE 7and 8...it doesnt..that shouldn't have been there.

I guess to be more clear, I cannot use the radius attribute because it will not be recognized by lower browsers.

Any ideas?

I do not know if it would work or not... or if there would be issues... but you already said you are using your image for background... rotate it three times (save each time) and then set it as background 4 times with the correct position assingment in the background...
eg

background:url('myimage1.jpg') top left;
background:url('myimage2.jpg') top right;
background:url('myimage3.jpg') bottom left;
background:url('myimage4.jpg') bottom right;


Again... I have no clue if that will work or not, but worth a try

Interesting. Ill give it a try and see if it works. Ill post the results. Thanks!