Firefox (in Windows) seems to not be recognising border-style: inset; (as well as groove, ridge and outset) as can be seen (ironically) from this mozilla developer page - the aforementioned border styles display proerly in Google Chrome but not Forefox (all on Windows 10).
I have Googled but can’t find anything about this. I can’t believe that this is a bug that I and no-one else has yet seen? Anyone know anything about this?
Hi there wake689,
I cannot speak for Windows 10, but I can say that
Firefox 85 renders the border styles correctly on
Windows 7 and Linux Mint.
Here is my test code…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Firefox 85 border test</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.62em sans-serif;
}
h1 {
font-size: 1.5em;
font-weight: normal;
text-align: center;
}
#container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#container div{
width: 23%;
padding: 1em;
margin: 0.5em 0;
box-sizing: border-box;
border-width: 1em;
border-color: #000;
background: #fff;
text-align: center;
}
#container div:nth-child(1) {
border-style: solid;
}
#container div:nth-child(2) {
border-style: dotted;
}
#container div:nth-child(3) {
border-style: dashed;
}
#container div:nth-child(4) {
border-style: double;
}
#container div:nth-child(5) {
border-style: groove;
}
#container div:nth-child(6) {
border-style: inset;
}
#container div:nth-child(7) {
border-style: outset;
}
#container div:nth-child(8) {
border-style: ridge;
}
</style>
</style>
</head>
<body>
<h1>Firefox 85 border test</h1>
<div id="container">
<div>solid</div>
<div>dotted</div>
<div>dashed</div>
<div>double</div>
<div>groove</div>
<div>inset</div>
<div>outset</div>
<div>ridge</div>
</div>
</body>
</html>coothead
How peculiar - that code, saved as an .html file to my desktop also works. But this doesn’t:
This is to show how the page works for dotted:
The problem with the MDN demo is that they haven’t defined a border-color so you get the current color (currentcolor - essentially inherited from the color in the body element in that example) for all 4 borders which makes it appear solid. If you open devtools and set a border-color like red (or even black) then the inset and outset will show properly. Or alternatively remove the color from the body in devtools and the border magically appears 
Note that the demo by @cootehead actually shows the opposite results and chrome in Windows and MAC as both platforms show the bottom 4 examples in the demo as solid on all sides.
Both PC and Mac show exactly the same as that image.
However the problem in Chrome is simply that the border-color chosen was black and Chrome doesn’t seem to cater for black. If you change to a different colour you get the results in both browsers.
Note that historically border styles have never been consistent between browsers as the specs allowed some leeway in their implementation.
I put the code from @coothead into a codepen for ease of checking.
Screenshot of Chrome only:
Ah. Thank you for your usual detailed explanation.
Yes, he has a skill which I, unfortunately, don’t possess. 
coothead
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
