title: Input submit border inside with set dimensions
body: <p>Please don't suggest I stop using <code>&lt;input type="submit"&gt;</code> I need to support non javascript-enabled users.</p>
  
  <p>I have a submit button, and on <code>:hover</code> I apply a border to it. However I have noticed that in Firefox 15 and IE7 the border gets applied to the inside of the element. This appears to be because I have set a fixed <code>width</code> and a <code>height</code> to the element and behaves normally once I remove them. However due to browser inconsistencies I need the width and height to ensure the submit button is the same size in all browsers.</p>
  
  <p><img src="https://i.stack.imgur.com/Q0vtv.png" alt="Submit button border bug"></p>
  
  <p>Does anyone know how to prevent the border from being drawn inside the element?</p>
  
  <p>Relevant CSS:</p>
  
  <pre><code>#searchform .submit {
      vertical-align: middle;
      float: right;
      height: 31px;
      width: 31px;
      position: relative;
      left: -4px;
      margin-right: -4px;
      background-image: url(library/images/search-icon.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-color: #ffffff;
      border: none;
      -webkit-border-bottom-right-radius: 5px;
      -webkit-border-top-right-radius: 5px;
      -moz-border-radius-bottomright: 5px;
      -moz-border-radius-topright: 5px;
      border-bottom-right-radius: 5px;
      border-top-right-radius: 5px;
  }
  #searchform .submit:hover {
      margin: -2px -6px 0px 0px;
      border: 2px solid #000;
  }
  </code></pre>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;input type="submit" value="" class="submit btn" /&gt;
  </code></pre>