Border around meter element in Chrome and Firefox

Trying to style the HTML5 meter element, I noticed that Chrome renders the border in a different way than Firefox. Actually, it ignores the color entirely.

meter {
  width: 400px;
  height: 50px;
  
  background: #ccc;
  
  border: 5px solid #f00;
}

meter::-webkit-meter-bar {
  background: #ccc;
}

meter::-webkit-meter-optimum-value {
  background: #0a0;
}

meter::-moz-meter-bar {
  background: #0a0;
}

<meter value="50" min="0" max="100">

Adding the border to -webkit-meter-bar works as intended in Chrome, but if I add a border to both meter (for Firefox) and -webkit-meter-bar (for Chrome), the element will have a double-border in Chrome.

Why does Chrome ignore the border color and is there a way to style the meter in such a way that it looks the same in Chrome and Firefox except using a wrapper with its own border?

The only option you got here is to give different styles to the border of the meter in firefox and chrome (border in firefox, no border in chrome), and use the -webkit-meter-bar to set the border in chrome.

You can use the @-moz-document url-prefix() hack in order to do this:

@-moz-document url-prefix() {
    meter {
        border: 5px solid #f00;
    }
}

Here is an example:

meter {
  width: 400px;
  height: 50px;
  background: #ccc;
}

@-moz-document url-prefix() {
    meter {
        border: 5px solid #f00;
    }
}

meter::-webkit-meter-bar {
  background: #ccc;
  border: 5px solid #f00;
}

meter::-moz-meter-bar {
  background: #0a0;
}

meter::-webkit-meter-optimum-value {
  background: #0a0;
}

<meter value="50" min="0" max="100"></meter>