This is really really weird:
Without anything in chrome buttons look like this:
The reason that you are seeing a big difference is because when there is no
border-radius set, the UA (WebKit) assigns the value for the
-webkit-appearance property as
button whereas when there is a
border-radius set, it resets it to
none. It seems like the
button appearance has some specific style settings which are not applied when the appearance is set to
none. This can be viewed from the Computed Styles tab in the Developer Console.
As stated in this WebKit blog article dated 7th October 2005, there are three appearance constants for buttons namely,
push-button (which is used by
<input type="submit" .../>),
button (which is used by the
<button> element). When an appearance constant is set, the element continues to use the pre-defined appearance settings unless we explicitly reset the
appearance value to
none or use our own background and/or border properties. In my opinion, this explains the reason for the difference that we are seeing.
Note: The blog article doesn't explicitly specify
border-radius but I am considering border properties to cover the entire spectrum of all properties relating to border and its styling.