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.