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: butt

Answer 1

In Chrome, the user agent stylesheet styles s as:

button {
    -webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: buttonface;
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
}

And border: none is a shorthand, which translates to:

{
  border-top-color: initial;
  border-top-style: none;
  border-top-width: initial;
  border-right-color: initial;
  border-right-style: none;
  border-right-width: initial;
  border-bottom-color: initial;
  border-bottom-style: none;
  border-bottom-width: initial;
  border-left-color: initial;
  border-left-style: none;
  border-left-width: initial;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}

The properties you are probably interested in are border-width, border-color and border-style (the apparently thin darker border comes from border-style: outset;).

It is, indeed, quite strange how a border-style: outset; border-width: 2px button renders, when compared to one having a width of 1px or 3px:

.\31 { border-width: 1px }
.\33 { border-width: 3px }

border-width: 1px; border-width: 2px; border-width: 3px;