CSS Border Rendering

CSS Border rendering

You could use CSS pseudo-content to achieve a fake border, like this:

.red-mark:before {
  content: '';
  display:block;
  width: 15px;
  position: absolute;
  top: -15px;
  left: -15px;
  bottom: -15px;
  background: red;
}

See: http://jsfiddle.net/MnPka/1/

The minus positions are because 0 starts within the border. You may be able to change this behaviour by setting box-sizing though support for that isn't that great yet - http://caniuse.com/#search=box-sizing

CSS: How to control the render order of borders?

Stacking without the z-index property | MDN

When the z-index property is not specified on any element, elements
are stacked in the following order (from bottom to top):

1. The background and borders of the root element Descendant
2. non-positioned blocks, in order of appearance in the HTML Descendant
3. positioned elements, in order of appearance in the HTML

Short answer is:

.nav-tabs {
  position: relative;
  ...
}

Related examples:

.a {  height: 20px;  background: pink;  margin-bottom: -10px;}
.b {  height: 40px;  border: 10px solid gray;}
.relative {  position: relative;}
.z-index {  z-index: 1;}

<h3>Example 1: all default</h3><div class="a"></div><div class="b"></div>
<h3>Example 2: 1st position: relative</h3><div class="a relative"></div><div class="b"></div>
<h3>Example 3: both position: relative</h3><div class="a relative"></div><div class="b relative"></div>
<h3>Example 4: both position: relative + 1st z-index: 1</h3><div class="a relative z-index"></div><div class="b relative"></div>

CSS border-right doesn't rendering correctly

As mentioned, the problem is the bottom border overlaping the right one. So, a possible solution is to "fake" a border using :after pseudo, placing it at the right of the element:

Updated JSFIDDLE

.border {
    position: relative;
}

.border:after {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: black;
    content: "\00a0"; /* invisible content */
}

Firefox border rendering css arrow bug

Use translateZ(1px) with rotate property value

transform:translateZ(1px) rotate(-45deg)

---

Related Topics