title: Firefox adding additional 1px to block element with border-radius
body: <p>Oddly enough, and just since recently (perhaps since an Update?) Firefox (16.0.1) gives me an additional white or blank pixel row within elements that have a border-radius set.</p>
  
  <p>I have tried modifying a lot of properties, such as line-height, overflow and more, but nothing seems to work and for other odd reasons, i am not able to reproduce the problem outside of the framework in which i render these buttons. However, i have tried disabling the CSS reset i use, i have tried disabling certain other values in the outlying CSS, using Firebug, but to no avail.</p>
  
  <p>As i don't know how to reproduce it, i have put together a graphic demonstrating the issue:</p>
  
  <p><img src="https://i.stack.imgur.com/ZaHn6.png" alt="Demonstration of Problem"></p>
  
  <p>Has anyone ever encountered this problem and is aware of a possible fix?</p>
  
  <p>Edit: I now also noticed that other elements are messed up too. This is definitely a new development. Even inputs seem wrong and setting the line-height for them, does not affect the outcome. See additional graphic:</p>
  
  <p><img src="https://i.stack.imgur.com/BOFp3.png" alt="Additional Graphic"></p>
  
  <p>Here is the CSS tree for the input field viewed in the second graphic:</p>
  
  <pre><code>.dynamicForm-componentEdit .componentLabel input.long {
      width: 320px;
  }
  
  .dynamicForm-componentEdit .componentSettings textarea, .dynamicForm-componentEdit .componentLabel textarea, .dynamicForm-componentEdit .componentSettings input, .dynamicForm-componentEdit .componentLabel input {
      background: -moz-linear-gradient(center top , #FFFFFF 0%, #FAFAFA 100%) repeat scroll 0 0 transparent;
      border: 1px solid #CDCDCD;
      border-radius: 6px 6px 6px 6px;
      color: #666666;
      font-size: 10px;
      height: 12px;
      line-height: 20px;
      margin-bottom: 4px;
      margin-right: 8px;
      margin-top: 4px;
      padding: 2px 6px;
      width: 130px;
  }
  input {
      font-family: Helvetica,Arial,Verdana;
      outline: 0 none;
  }
  * {
      margin: 0;
      padding: 0;
  }
  .dynamicForm-componentEdit {
      color: #AAAAAA;
  }
  .interfaceBlock-content {
      color: #666666;
      font-family: Verdana;
      font-size: 11px;
  }
  body {
      color: #333333;
      font-family: Helvetica,Arial,Verdana,Geneva;
      font-size: 13px;
      font-weight: 500;
      line-height: 16px;
      color: #000000;
      font-size: 100.01%;
      text-align: left;
  }
  </code></pre>
  
  <p>Edit #2: The problem seems to be related to CSS3 gradients. I changed the CSS from:</p>
  
  <pre><code>background: -moz-linear-gradient(center top , #F7F7F7 0%, #E5E5E5 100%) repeat scroll 0 0 transparent;
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>background: none repeat scroll 0 0 #DDDDDD;
  </code></pre>
  
  <p>See this graphic:</p>
  
  <p><img src="https://i.stack.imgur.com/NbZht.png" alt="Graphic Number 3"></p>
  
  <p>The problem disappears when using a normal background!</p>