Search code examples
htmlcssdivider

How to create a pixel perfect divider using css border

I have a menu with background black and submenu with backgound grey.

Now I would like to have a pixel perfect divider between them.

But I have no idea what border color I should use to get pixel perfect divider. Can anyone help me?

Here is the html code

<!DOCTYPE html>
<html>
<body>
<div class="mainnav">
    <p> This is main nav </p>
</div>
<div class="subnav">
     <p> This is sub nav </p>
</div> 
</body>
</html>

And here is my css

.mainnav {
width:100%;
    height:60px;
    background-color:#000000;
    color:#ffffff;
    text-align:center;
}
.mainnav p {
padding-top:20px; 
}
.subnav p {
padding-top:10px; 
}
.subnav {
width:100%;
    height:45px;
    background-color:#333;
    color:#ffffff;
    text-align:center;
}

​

Here is my jsfiddle.

http://jsfiddle.net/ruUgk/

Thanks.

Solution

  • Add a bottom border to .mainnav

    .mainnav {
    border-bottom:1px solid #fff;
}

    http://jsfiddle.net/ruUgk/1/