CSS Pixel Perfection in Chrome

Question

In pursuit of pixel perfection the browser seems to be adding an extra pixel to the top and bottom of the following input element but I can't figure out from where.

  input {
    border-radius: 10px;
    height:30px;
    display: inline-block;
    float:left;
    border:none;
    }
  }

Chromes magnifying glass shows the element with a total height of 32 and I'm trying to get 30.

It's a typical devise form coded in HAML:

.registration{:style => 'display:none'}
  = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
    %div
      = f.label :email do
        = f.email_field :email, :autofocus => false, :placeholder => "Email"
    %div
      = f.label :password do
        = f.password_field :password, :placeholder => 'Password'
    %div
      = f.label :password_confirmation do
        = f.password_field :password_confirmation, :placeholder =>'Confirm Password'
    %div= f.submit "Sign up"

Answer 1

You should take out padding:

input { padding: 0; }

JSFiddle: http://jsfiddle.net/nSmU9/

Update:

In Google Chrome, I see the height is 30px.