How to apply an inset border into an HTML element, but just only on one side of it. Until now, I\'ve been using an image to do that (GIF/PNG) that I would
The great thing about HTML/CSS is that there's usually more than one way to achieve the same effect. Here's another solution that does what you want:
<nav id="menu1">
<ul>
<li><a href="#">Menu Link 1</a></li>
<li><a href="#">Menu Link 2</a></li>
</ul>
</nav>
nav {
background:#666;
margin:1em;
padding:.5em 0;
}
nav ul {
border-top:1px dashed #fff;
list-style:none;
padding:.5em;
}
nav ul li {
display:inline-block;
}
nav ul li a {
color:#fff;
}
http://jsfiddle.net/10basetom/uCX3G/1/