The Border-radius property of the input box is perfectly compatible under IE8

In the work we found that most of the search box has rounded corners, as an inexperienced front-end personnel can easily think of the input tag to add the Border-radius attribute is not solved. Good method is true, but do not forget Border-radius is CSS3 property, IE8 incompatible!!! So the question is, how to be perfectly compatible under the IE8?

There are many online CSS3 properties on the IE8 compatible method, need to introduce PIE.HTC this file, I believe it is easy to search and download the file, but the use of Position:relative;behavoior:url (PIE.HTC), and then found that the fillet is realized, But there's a black border like this in the picture.

Under normal conditions, there are black edges IE8

Workaround:

The border:none of the input tag; the outer rounded border is set with the label of the envelope, in order not to affect the aesthetics in conjunction with margin or padding

As shown in the final results, the FF Chome are perfectly compatible

The Border-radius property of the input box is perfectly compatible under IE8