Firefox not properly displaying inset box-shadow with border-radius

Question

I have several buttons at the top of a sidebar. The first and last buttons have a rounded corner to match the edges of the sidebar. When .active, the buttons should have an inset box-shadow. In Chrome, this works properly. In Firefox, however, the box-shadow doesn't follow the border-radius and instead has a sharp corner. Am I doing something wrong, or is this a bug in the way Firefox renders the shadow? This is Firefox 41.0.1 for Ubuntu, by the way.

I can't post a screenshot (company policies) but I have put up a fiddle (link at end of post) where you should be able to see the problem.

I've searched for a couple of days and haven't found any other questions describing this same behavior.

Here's the HTML:

<div class="sidebar">
<div class="sidebar-nav"> 
    <a class="menu-item active" href="#" onclick='toggleNav(this)'>
      My Page
    </a>
    <a class="menu-item" href="#" onclick='toggleNav(this)'>
      Your Page
    </a>
    <a class="menu-item" href="#" onclick='toggleNav(this)'>
      Our Page
    </a>
</div>
<div class="sidebar-main">
    <div class="sidebar-row">
        <div class="sidebar-h1">User Info</div>Phasellus blandit nulla ante, non tempus sem imperdiet sagittis. Vivamus condimentum et est eu iaculis. Nam semper nunc quis rhoncus viverra. Nam lorem nulla, feugiat at sodales sit amet, tempor quis nisi. Sed dictum in tortor et dapibus. Aliquam erat volutpat. Vivamus venenatis faucibus justo vitae rutrum. Sed in viverra ipsum. Duis et metus at metus euismod fermentum sed eu dolor.</div>
    <div class="sidebar-row">
        <div class="sidebar-h1">User Settings</div>
        <label>
            <input type="checkbox" />Settings</label>
        <br>
        <select>
            <option>Words</option>
            <option>Things</option>
            <option>Stuff</option>
        </select>
    </div>
</div>
</div>

And the CSS:

.sidebar {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #888;
    background: #eee;
    width: 250px;
    height: 100%;
}
.sidebar-nav {
    padding: 0px;
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
}
.sidebar-nav > .menu-item {
    color: #888;
    padding: 10px;
    vertical-align: top;
    display: table-cell;
    cursor: pointer;
    text-decoration: none;
}
.sidebar-nav > .menu-item:first-child {
    border-radius: 8px 0 0 0;
}
.sidebar-nav > .menu-item:last-child {
    border-radius: 0 8px 0 0;
}
.sidebar-nav .menu-item + .menu-item {
    border-left: 1px solid #ccc;
}
.sidebar-nav > .menu-item:not(.active):hover {
    background-color: #ddd;
}
.sidebar-nav > .active {
    color: white;
    box-shadow: inset 0px -2px 4px 2px #888;
    background-color: #aaa;
}


.sidebar-main {
    padding: 10px;
}

.sidebar-h1 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}

.sidebar-row {
    padding: 15px;
    position: relative;
}

.sidebar-row:after {
    content:'';
    width: 50%;
    height: 1px;
    background: #ddd;
    position: absolute;
    left: 25%;
    bottom: -1px;
}

And the JSFiddle (note that the fiddle also includes a little jQuery to make the buttons clickable).

Answer 1

This is because of display: table-cell; in your .sidebar-nav > .menu-item {} selector. Fix it by adding display: block; to your .sidebar-nav > .active class:

function toggleNav(elem) {
 	$('a').removeClass('active');
    $(elem).addClass('active');
}

.sidebar {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #888;
    background: #eee;
    width: 250px;
    height: 100%;
}
.sidebar-nav {
    padding: 0px;
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
}
.sidebar-nav > .menu-item {
    color: #888;
    padding: 10px;
    vertical-align: top;
    display: table-cell;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}
.sidebar-nav > .menu-item:first-child {
    border-radius: 8px 0 0 0;
}
.sidebar-nav > .menu-item:last-child {
    border-radius: 0 8px 0 0;
}
.sidebar-nav .menu-item + .menu-item {
    border-left: 1px solid #ccc;
}
.sidebar-nav > .menu-item:not(.active):hover {
    background-color: #ddd;
}
.sidebar-nav > .active {
    color: white;
    box-shadow: inset 0px -2px 4px 2px #888;
    background-color: #aaa;
    display: block;
}


.sidebar-main {
    padding: 10px;
}

.sidebar-h1 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}

.sidebar-row {
    padding: 15px;
    position: relative;
}

.sidebar-row:after {
    content:'';
    width: 50%;
    height: 1px;
    background: #ddd;
    position: absolute;
    left: 25%;
    bottom: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="sidebar">
    <div class="sidebar-nav"> 
        <a class="menu-item active" href="#" onclick='toggleNav(this)'>
          My Page
        </a>
        <a class="menu-item" href="#" onclick='toggleNav(this)'>
          Your Page
        </a>
        <a class="menu-item" href="#" onclick='toggleNav(this)'>
          Our Page
        </a>
    </div>
    <div class="sidebar-main">
        <div class="sidebar-row">
            <div class="sidebar-h1">User Info</div>Phasellus blandit nulla ante, non tempus sem imperdiet sagittis. Vivamus condimentum et est eu iaculis. Nam semper nunc quis rhoncus viverra. Nam lorem nulla, feugiat at sodales sit amet, tempor quis nisi. Sed dictum in tortor et dapibus. Aliquam erat volutpat. Vivamus venenatis faucibus justo vitae rutrum. Sed in viverra ipsum. Duis et metus at metus euismod fermentum sed eu dolor.</div>
        <div class="sidebar-row">
            <div class="sidebar-h1">User Settings</div>
            <label>
                <input type="checkbox" />Settings</label>
            <br>
            <select>
                <option>Words</option>
                <option>Things</option>
                <option>Stuff</option>
            </select>
        </div>
    </div>
</div>