Why do default buttons change color when borders are removed?

Question

As you can see from running the snippet below, the background color becomes darker when borders are removed. I guess it has something to do with background-color: buttonface; in the browser's default stylesheet, but am unable to understand the short description of it on w3.

Browser: Chrome 78 on Ubuntu 18.

.noBorder {
  border: none;
}

<button type="button" class="noBorder">No border</button>
<button>With border</button>

Answer 1

I don't think you will find an explanation of this behavior in the classic CSS world because buttons are special elements. You may need to dig into how each browser implements the button element to understand what is happening.

I don't have any official proof but to use easy words: buttons have default style applied by the browser (related to border and background) and if you try to alter any value you will break everything.

Examples:

<button style="background-color:grey">button</button>
<button style="border-color:grey">button</button>
<button style="border-width:3px">button</button>
<button style="border-radius:5px">button</button>
<button style="border-image:none">button</button>
<button style="border-image-slice:1">button</button>
<button style="background-origin:content-box">button</button>
<button style="background-clip:content-box">button</button>
<button>button</button>

 

In the above, you will notice that all the buttons are losing their default style if we change any rule related to border or background (even irrelevant ones like border-image-slice or background-clip). In Firefox, it's different as the last four buttons will keep their default style. Don't know about the other browser but it's probably different too.

UPDATE

In the last version of Chrome the same thing seems to happen with input elements:

<input>
<input style="border-image-slice:1">
<input style="border-image:none">
<input style="border-width:3px">
<input style="background-origin:content-box">