While attempting to add a 1px solid border around an anchor tag with a dark background color in hexadecimal format, I discovered that the bottom border was not showing up!
After investigating for a while, I realized that the issue was caused by the background color being expressed in hexadecimal. It seems that in this scenario, the browser starts rendering the background 1px lower than it should, causing the background color to overlap the bottom border. If the background color is darker than the border color, the bottom border appears to "disappear."
To demonstrate this behavior, I created a fiddle:
HTML
<a href="#" id="a1">ANCHOR1</a>
<br>
<a href="#" id="a2">ANCHOR2</a>
<br>
<a href="#" id="a3">ANCHOR3</a>
<br>
<a href="#" id="a4">ANCHOR4</a>
CSS
a {
text-decoration:none;
}
a, div {
width:95%;
padding-left:5%;
display:block;
border:1px solid red;
}
#a2, #d2 {
background-color:yellow;
}
#a3, #d3 {
background-color:#00ffb6;
}
#a4, #d4 {
color:white;
background-color:#1769b6;;
}
- element without background color: border displays correctly all around it
- element with named color background: border still visible all around
- element with light hexadecimal background color: border shows but background renders 1px lower, overlapping the bottom border
- element with dark hexadecimal background color: bottom border appears to vanish
I tested this on Mac El Capitain 10.11.6 using:
- Firefox 51.0.1
- Chrome 56.0.2924.8
- Safari 10.0.3
All browsers exhibited the same behavior.
Any suggestions on how to achieve a full 1px solid border around an element with a hexadecimal background?
The problem is not specific to the anchor tag, as demonstrated in the fiddle where the same styles were applied to divs.