5

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.

Demonstration

.noBorder {
  border: none;
}
<button type="button" class="noBorder">No border</button>
<button>With border</button>

2
  • Hey, which browser and OS are u using? Because there is no difference in the background-color for me. Both having a white background-color. Nov 29, 2019 at 8:00
  • @QuentinAlbert Chrome on Ubuntu. I will add a picture in the question detail.
    – formicini
    Nov 29, 2019 at 8:02

3 Answers 3

4

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">

3

In Chrome, the user agent stylesheet styles <button>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 }
<button class="1">border-width: 1px;</button>
<button class="2">border-width: 2px;</button>
<button class="3">border-width: 3px;</button>

It looks to me like Chrome is making an exception from how outset renders on buttons with a border-width of 2px, which happens to be the default border width set in user agent stylesheet.

For a full explanation on what's going on, read comments, see @Mukyuu's answer which, IMHO, is correct, and see this fiddle - forked from the one in comments.


Important: To be able to answer this type of CSS questions yourself, open Dev Console of Chrome (F12 or Ctrl/Cmd+I), select "Styles" side-tab:

enter image description here

, click on the element you want to inspect in the DOM tree (on left) and find the shorthand property in the Styles list. In your case, border: none;. You'll notice a small arrow after the the property name:

enter image description here

Click that arrow and you'll get the full list of what the browser parses it into.

That's how I got the information provided in this answer and my answer is true now. If standards change over time, it might become obsolete but, if you do as outlined above, you'll always get the currently "correct" answer.

4
  • It's not just that, when you use all: initial you would at the very minimum require -webkit-appearance: button; color: buttontext; background-color: buttonface; font: 400 13.3333px Arial; padding: 1px 6px; border-width: 2px; border-style: outset; border-color: buttonface; border-image: initial;
    – Mukyuu
    Nov 29, 2019 at 9:15
  • 1
    I'm not sure I understand what you're saying, @Mukyuu. Without touching any other property, I'd expect a border-style: outset; border-width: 2px; to render similarly to the ones having 1px or 3px, the only thing changed being the number of pixels. Still, it does not happen. The least we could say is that it renders unexpectedly. As far as I'm concerned, it's definitely classifiable as a "bug". Because one can't obtain what you normally expect from an element with a border-style of outset;.
    – tao
    Nov 29, 2019 at 9:26
  • Not sure if it was intended but I agreed that it's supposed to be a bug. Meanwhile, if you're interested I was trying to break down the button style here: jsfiddle.net/jcL29a5r
    – Mukyuu
    Nov 29, 2019 at 9:30
  • 1
    Well, that's the correct and complete answer, Mukyuu. With the amendment .p2 and .p5 are not, really required. So you're saying in this image, to obtain the right-hand side button, all one has to do is apply either border-image:none or background-color: #ddd. Which is correct. However, it's a very strange decision from Chrome dev team. Having unexpected rendering results is never good, IMHO. Please add these findings to your answer, you have my upvote.
    – tao
    Nov 29, 2019 at 9:46
2

It depends on how the browser handles buttons related


The following was limited to the Chrome Browser:

When you try to use all:initial to applies the initial (or default) value of a property to an element. You would at the very minimum need the following style to have the default button:

-webkit-appearance: button;
border-width: 2px;
border-style: outset;
border-color: buttonface;
background-color: buttonface;

Breaking down the button style:

.noBorder {
  border: none;
}

.all-init {
  all: initial;
}

.leftover {
  color: buttontext;
  border-image: initial;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
}

.p1 {
  /*property #1 required*/
  -webkit-appearance: button;
}

.p2 {
  /*property #2 required*/
  border-width: 2px;
}

.p3 {
  /*property #3 required*/
  border-style: outset;
}

.p4 {
  /*property #4 required*/
  border-color: buttonface;
}

.p5 {
  /* property #5 required*/
  background-color: buttonface;
}

.whole {
  -webkit-appearance: button;
  color: buttontext;
  background-color: buttonface;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
}
<button type="button" class="noBorder">No border</button> <br/>
<button class="all-init">test0</button>
<button class="all-init p1">test1</button>
<button class="all-init p1 p2">test2</button>
<button class="all-init p1 p2 p3">test3</button>
<button class="all-init p1 p2 p3 p4">test4</button>
<button class="all-init p1 p2 p3 leftover">test5a</button>
<button class="all-init p1 p2 p4 leftover">test5b</button>
<button class="all-init p1 p3 p4 leftover">test5c</button>
<button class="all-init p2 p3 p4 leftover">test5d</button>
<button class="all-init p1 p2 p3 p4 leftover">test6</button><br/>
<button class="all-init p1 p2 p3 p4 p5">test7</button>
<!-- test7 is the very minimum style required -->
<button class="all-init p1 p2 p3 p4 leftover">test8a</button>
<button class="all-init p1 p2 p3 p5 leftover">test8b</button>
<button class="all-init p1 p2 p4 p5 leftover">test8c</button>
<button class="all-init p1 p3 p4 p5 leftover">test8d</button>
<button class="all-init p2 p3 p4 p5 leftover">test8e</button>
<button class="all-init p1 p2 p3 p4 p5 leftover">test8f</button>
<button class="all-init whole">test9</button>
<br/><button>With border</button>

Additional info: button was using ButtonFace which is CSS2 color name corresponding to HEX value: #F0F0F0 or RGB value: 240,240,240 to display it see more in http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html.


Disclaimer: As Temani Afif said in this answer

every browser have default style applied by the browser (related to border and background) and if you try to alter any value you will break everything.

You could probably see test0 and test1 working in Edge and none working in Firefox since it was how the browser handles buttons related. You can see Andrei Gheorghiu answer for more detail for button complete style and debugging method.


As such, the most common workaround that I've seen and implemented is not to use <button> but other elements such as <a> or <input> to support cross-browser.

Example:

.styling {
  background-color: #1cbcd8;
  color: #fff;
  border-color: #1cbcd8;
}

.styling:hover {
  background-color: #255FF9;
}

.extra {
  display: inline-block;
  cursor: default; /* or pointer */
  padding: 3px;
  text-decoration: none;
}
<input class="styling" type="submit" value="Test">

<a href="#" class="styling extra">Test</a>

10
  • Why does setting border-color change background-color of the button?
    – formicini
    Nov 29, 2019 at 8:13
  • Sorry, I'm not following you here. Setting border-color to any another color beside currentColor cause the background to darken. If ButtonFace is only a normal color name, why does it react like that?
    – formicini
    Nov 29, 2019 at 8:33
  • Okay, so currentColor computes to ButtonFace in this case. My question is still the same though. Or did you mean that the "background color" I see is actually the color of the borders covering the whole button?
    – formicini
    Nov 29, 2019 at 8:38
  • @formicini w3.org/wiki/CSS/Properties/color/keywords. ButtonFace is part of System Colors which is the face background color for 3-D elements that appear 3-D due to one layer of the surrounding border.
    – Mukyuu
    Nov 29, 2019 at 8:40
  • 1
    @formicini you won't find explanation in any Doc or the specification. It's not related to classic CSS but how browser handle buttons. First it's not the same across browser second button have a default style, if you try to change anything, you simply override the whole style. If you change background color you will also break the broder Nov 29, 2019 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.