Navigation bar border - css

Question

JavaScript
nav{
width: 100%;
height: 60px;
background: linear-gradient(to bottom, #fff, #bbb);
border-bottom: 1px solid #fff;
}
.wrapper{
max-width:1200px;
margin:0 auto;
}
li{
float:left;
width: 15%;
list-style: none;
margin-top: 5px;
}
a{
text-decoration: none;
box-sizing: border-box;
display: block;
padding: 10px 10px;
text-align: center;
color: #052537;
}
.nav01,
.nav03,
.nav05{
border-right: 1px solid #999999;
border-left: 1px solid #fff;
}
.nav02,
.nav04{
border-left: 1px solid #fff;
border-right: 1px solid #999999;
}
<nav>
<div class="wrapper">
<div class="nav-global">
<ul>
<li class="nav01">go1</li>
<li class="nav02">go2</li>
<li class="nav03">go3</li>
<li class="nav04">go4</li>
<li class="nav05">go5</li>
</ul>
</div>
</div>
</nav>
Nav bar
Hello, everyone, I have the problem to design the nav bar very first and the last border. I want to make borders like in the shared picture. I can't figure it out how to design nav01 first border and nav 05 last border because I want a combination of two borders as I did in nav02,nav03 and nav04. Please help me

Answer 1

One way is to use border and use different properties of border to get your desired result. You can experiment and be as creative as you can. Just for once, go through all the possibilities and what CSS is capable of. Then you can easily figure out which properties to combine to make your own prototype into code.
nav {
width: 100%;
background: #e4e4e4;
font-family: 'arial';
}
.navbar-ul a {
text-decoration: none;
list-style-type: none;
display: block;
float: left;
font-size: 20px;
width: 120px;
border: 1px solid #000;
text-align: center;
margin: 10px 0px;
border-left: none;
border-top: none;
border-bottom: none;
color: #1f1f1f;
}
ul a:last-child {
border-right: none;
}
li {
margin: 5px;
}
a:hover {
text-decoration: none !important;
}
li:hover {
margin: 5px;
background: #1f1f1f;
color: white;
text-decoration: none !important;
transition: all .2s;
border-radius: 4px;
}
.navbar-ul a:hover {
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="clearfix">
<ul class="navbar-ul">
<a>
<li>Home</li>
</a>
<a>
<li>Profile</li>
</a>
<a>
<li>Contact</li>
</a>
<a>
<li>Blogs</li>
</a>
</ul>
</nav>