Question

I have a ul with a 1px left border as well as a 2px bottom border on its li children. The problem is that I want to keep the 1px space in between each li element’s bottom border. Here’s what it currently looks like:

How I would like it to look:

As you can see, once the border-left ends, the border-bottom continues and fills in the 1px gap. Is there a way to prevent this?

Here is the relevant HTML:

        <div id="mainNav">
          <ul>
            <li>
                <a href="#" class="mainNavLink">Leaderboards</a>
            </li>
            <li>
                <a href="#" class="mainNavLink">Statistics</a>
            </li>
            <li id="mainNavSearch">Search</li>
        </ul>
      </div>

And the CSS:

#mainNav{
    width: 100%;
    height: 35px;
    background-color: #202020;
    border-bottom: 1px solid #444;
    position: relative;
    overflow: hidden;
}

#mainNav ul{
    width: 960px;
    height: 35px;
    margin: 0 auto 0 auto;
    display: block;
    position: relative;
}

#mainNav ul li{
    float: left;
    position: relative;
    height: 25px;
    padding: 10px;
    padding-top: 8px;
    padding-bottom: 0;
    font-size: 17px;
    border-left: 1px solid #444;
    border-bottom: 2px solid #00a4ff;
    background: -moz-linear-gradient(top,  rgba(24,24,24,0) 60%, rgba(24,24,24,0.38) 90%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(24,24,24,0)), color-stop(90%,rgba(24,24,24,0.38)), color-stop(100%,rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181818', endColorstr='#80000000',GradientType=0 );
}

#mainNavSearch{
    border-right: 1px solid #444;
}

Answer 1

As I couldn’t find a way to prevent the border from leaking along with the fact that I didn’t want the a to be the size of the entire li elements, I had to insert an additional div and apply the border-bottom and padding-left/right styles to that instead:

HTML:

    <div id="mainNav">
        <ul>
            <li>
                <div>
                    <a href="#" class="mainNavLink">Leaderboards</a>
                </div>
            </li>
            <li>
                <div>
                    <a href="#" class="mainNavLink">Statistics</a>
                </div>
            </li>
            <li id="mainNavSearch">Search</li> <!-- I did not include a div here as I plan on changing this to a search bar later -->
        </ul>
    </div>

CSS:

#mainNav{
    width: 100%;
    height: 35px;
    background-color: #202020;
    border-bottom: 1px solid #444;
    position: relative;
    overflow: hidden;
}

#mainNav ul{
    width: 960px;
    height: 35px;
    margin: 0 auto 0 auto;
    display: block;
    position: relative;
}

#mainNav ul li{
    float: left;
    position: relative;
    height: 27px;
    font-size: 17px;
    border-left: 1px solid #444;
    padding-top: 8px;
}
#mainNav div{
    display: block;
    position: relative;
    height: 25px;
    padding: 0 10px 0 10px;
    border-bottom: 2px solid #00a4ff;
    background: -moz-linear-gradient(top,  rgba(24,24,24,0) 60%, rgba(24,24,24,0.38) 90%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(24,24,24,0)), color-stop(90%,rgba(24,24,24,0.38)), color-stop(100%,rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181818', endColorstr='#80000000',GradientType=0 );
}
#mainNavSearch{
    border-right: 1px solid #444;
    padding: 0 10px 0 10px;
}

Output:

---

If anyone knows how to do this without the additional div and without applying the styles to the a tags, please do share.