Customize the input button using shadow with rounded corners

I googled to find the solution for customize the input button using curve and shadow images, But finally i did some manipulation in css and got the required output ofcourse which works in all major browsers (ie - allversion,Mozilla,Mac safari) and this button will be extends upon the content. I felt this below information would be helpful for the web developer who wants to customize the input buttons to match the UI.

Initially we felt that, we can customize this input button by using 2 images (Sprite image concept) but later we faced some problems in ie using png filters.Finally we have used three images to create the button.

Here is the steps to follow to create the cutomize the input button.

I have create the below image with shadow which i would like to apply this same style for input button.



If you would like to have the same look and feel to the input button , you please save the below three png images and makesure you should save the images in png format only.

Here are the images





Here is the css styles for extendable button :
.button-small{
margin:0;padding:0;
list-style:none;
}
.button-small li{
float:left;
height:27px;
}
.button-small-left{
background:url(left-curve.png) no-repeat top right;
width:9px;
}
*html .button-small-left{
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='left-curve.png', sizingMethod='scale'); background: repeat-x top right;
_background: none;
}
.button-small-middle{
background: url(middle-bg.png) repeat-x top left;
padding:2px 2px 2px 2px;
}
*html .button-small-middle{
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='middle-bg.png', sizingMethod='scale'); background: repeat-x top left;
_background: none;
}
.button-small-right{
background:url(right-curve.png) no-repeat top right;
width:9px;
}
*html .button-small-right{
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='right-curve.png', sizingMethod='scale'); background: repeat-x top right;
_background: none;
}
.button-small-middle input{
border: 0px solid #9FBBC5 ;
background:none;
font-family:Arial;
font-weight:bold;
font-size:11px;
color:#FFFFFF;
display: block;
padding:0 .25em;
overflow:visible;
_width:0;
}
Here is the HTML Code for extendable input button
<ul class="button-small">
<li class="button-small-left"></li>
<li class="button-small-left"><input type="button" value="Register now" border="0"></li>
<li class="button-small-right"></li>
</ul>

Hope you get the enough informaton to customize the input buttons using shadow with rounded corner images.
Feel free to post your comments which will help me to improve further posts.
-Satishveera