lonewarrior556 lonewarrior556 -4 years ago 160
CSS Question

Why does border-radius cause huge style changes on buttons in chrome?

This is really really weird:

Without anything in chrome buttons look like this:

<button>Test</button>


enter image description here

However when you throw in the slightest of border-curvature, the css dramatically shifts to

<button style="border-radius:1px">Test</button>


button

Event More noticeable is the
button:active
css changes....

How is it that so many properties can change by adding styling to an object?
is there even such a thing as a css selector based on styling?

ie.
button:styled{}
?

here's a jsfiddle https://jsfiddle.net/vya24rhw/

Answer Source

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" .../>), bevel-button and 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download