Html – Remove only one border on input element and not effect the other borders

bordercsshtml

My intention for the script below (and also located at http://jsbin.com/enOxEya/1/) is just to remove the right border.

For FF, Chrome and IE, however, it makes the left and top border bold.

Furthermore, for FF, it removes the bottom border, and for Chrome and IE, it shades the bottom border.

See images for each browser (all browsers are fairly up to date)

Results from FF

Results from FF

Results from Chrome

Results from Chrome

Results from IE

Results from IE

Using border style none to just the top, bottom, and left border also produces unexpected results for all browsers.

How do I just remove a single border (i.e. the right one) without effecting the other three borders?

<!DOCTYPE html>
<html>
    <head>
        <title>Boarders</title>
        <style type='text/css'>
            #input2 {border-right-style:none}
        </style>
    </head>
    <body>
        <input id="input1" />
        <br />
        <br />
        <input id="input2" />
    </body>
</html>

Best Answer

Try this,it works fine

just replace

<style type='text/css'>
            #input2 {border-right-style:none}
        </style>

with this

<style type='text/css'>
            #input2 {border-style: solid none solid solid}
        </style>

hope this helps you.