Rounded corners for <input type='text' /> using border-radius.htc for IE

Question

I want to create an input fields with rounded corners.

HTML:

<div id="RightColumn"> <input type="text" class="inputForm" /> </div> 

CSS:

.inputForm {     -moz-border-radius:10px; /* Firefox */     -webkit-border-radius: 10px; /* Safari, Chrome */     -khtml-border-radius: 10px; /* KHTML */     border-radius: 10px; /* CSS3 */     behavior:url("border-radius.htc"); }  #RightColumn {     background-color:White; } 

But IE doesn't show any borders for input fields - neighter rounded nor simple borders. When I remove CSS-style for #RightColumn, IE shows an input fields with rounded corners. But I need background for #RightColumn.

How can I create it?

Answer 1

Oh lord, don't do it this way. HTC files are never a good idea for performance and clarity reasons, and you're using too many vendor-specific parameters for something that can easily be done cross-browser all the way back to IE6.

Apply a background image to your input field with the rounded corners and make the field's background colour transparent with border:none applied instead.