Border-bottom 1px too long on both sides CSS - html

Question

What I am doing:
On hover of a button I am addding a border-bottom of 5px.
JS FIDDLE: http://jsfiddle.net/mUCNB/
Problem:
The problem is the border bottom extends 1px too far on both the left and right side.
Question:
Does anyone know how to fix this?
Relevant Code:
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}
#main-nav a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}

Answer 1

Since CSS borders 'miter' at the edges, you're going to notice that phenomenon. To work around this, I've created rules to highlight the li BEHIND the a that is on hover. This creates the effect that you are getting a clean border at the bottom. You can retain those white separators between your elements too then.
Forked Fiddle
CSS
* {
margin: 0px;
padding: 0px;
outline: none;
}
#header {
background-color: #00a0c8;
min-height: 118px;
}
#headerContent {
width: 980px;
min-height: 118px;
margin: 0 auto;
background-color: #00a0c8;
}
nav {
width: 980px;
margin: 0 auto;
}
nav li {
border-left: 1px solid #fff; /* Added border to nav li */
display: block;
float: left;
height: 50px; /* Give it height */
}
#main-nav li:hover {
background: #0BC6F5; /* Give background color to li on hover */
}
nav li:first-child {
border-left: none;
}
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
}
#main-nav li a:hover {
height: 30px;
}
Hope that helps.

Answer 2

you can solve this issue by removing the border-left and border-right styles from the following:
updated css:
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:last-child {
width: 224px;
}
updated fiddle

Answer 3

Also a neat trick is to just use box-shadow instead, to apply the conflicting border:
#main-nav a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}
This works, if you just replace your current hover selector!
if you want to try it first, here's another fiddle:
http://jsfiddle.net/4zzMA/