title: Remove only one border on input element and not effect the other borders
body: <p>My intention for the script below (and also located at <a href="http://jsbin.com/enOxEya/1/" rel="nofollow noreferrer">http://jsbin.com/enOxEya/1/</a>) is just to remove the right border.</p>
  
  <p>For FF, Chrome and IE, however, it makes the left and top border bold.</p>
  
  <p>Furthermore, for FF, it removes the bottom border, and for Chrome and IE, it shades the bottom border.</p>
  
  <p>See images for each browser (all browsers are fairly up to date)</p>
  
  <p>Results from FF</p>
  
  <p><img src="https://i.stack.imgur.com/JoZKY.png" alt="Results from FF"></p>
  
  <p>Results from Chrome</p>
  
  <p><img src="https://i.stack.imgur.com/bZ6Kb.png" alt="Results from Chrome"></p>
  
  <p>Results from IE</p>
  
  <p><img src="https://i.stack.imgur.com/j3Ps8.png" alt="Results from IE"></p>
  
  <p>Using border style none to just the top, bottom, and left border also produces unexpected results for all browsers.</p>
  
  <p>How do I just remove a single border (i.e. the right one) without effecting the other three borders?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Boarders&lt;/title&gt;
          &lt;style type='text/css'&gt;
              #input2 {border-right-style:none}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input id="input1" /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input id="input2" /&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>