Style for pills in navbar - html

Question

How can i make custom pills for navbar like on
screenshot?
I did it by myself, but pills are inside of navbar and the text is not in the center of pill.
I understand, that the problem is inside of .menu li a:hover:not and .menu li a:hover:not(.active). But i don't know, how to make outside of navbar(i mean borders of the pills like on screenshot)
.menu {
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
margin: 0 auto;
padding: 0px;
overflow: hidden;
display: block;
list-style:none;
border-radius: 20px 0 0 0;
background-color: #0b78ad;
text-align: center;
}
.menu li {
list-style-type: none;
text-align: center;
display: inline-block;
}
.menu ul li a {
padding: 10px;
padding-left: 50px;
margin: 0px;
display: block;
text-align: center;
}
.menu li a:hover:not(.active) {
color: #325491;
}
.menu li.active a {
border-radius: 20px 0 20px 0;
border-style: solid;
border-width: 2px;
border-color: #325491;
color: #325491;
background-color: white;
}
<div class="menu">
<ul>
<li class="active">startseite</li>
<li>über uns</li>
<li>zell-linien</li>
<li>downloads</li>
<li>kontakt</li>
</ul>
</div>

Answer 1

.menu {
font-family: Arial, sans-serif;
}
.menu ul {
padding: 0;
list-style: none;
background-color: #0b78ad;
text-align: center;
white-space: nowrap;
height: 34px;
margin: 30px 0;
}
.menu li {
position: relative;
top: -10px;
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0 10px;
}
.menu ul li a {
position: relative;
display: block;
padding: 18px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 2px solid transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
line-height: 1;
transition: all .1s ease-in-out;
}
.menu ul li a.active,
.menu ul li a:hover {
background-color: #FFF;
border: 2px solid #0b78ad;
color: #0b78ad;
}
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skill</li>
<li>Contact</li>
</ul>
</div>

Answer 2

You can do it with just a plain border-radius, like any other property it starts with top, right, bottom and right
.button {
display: inline-block;
background-color: #ededed;
border: 1px solid deepskyblue;
border-radius: 10px 0 10px 0;
padding: 10px 16px;
text-align: center;
}
<div class="button">shape</div>

Answer 3

You can do like this.
1. Navbar you can give a 'max-height' property so that we can set a height for the first-child.
#nav-id {
max-height: 65px;
margin-top: 20px;
}
2.We can set the first 'li' 'margin-top' or 'position'
li:first-child {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 106px;
background: blue;
background-position: center;
margin-top:-20px;
z-index:1;
text-align:center;
}
Here is the working copy:
https://codepen.io/nabanitadasgupta/pen/aLNGgo