CSS styling navigation bar with short vertical lines

Question

As mentioned above I'm trying to get result like described in the title but for a better explanation here is my idea idea_prototype. I tried the basic css which has been provided here but my expectations are slightly different. Current outcome: navigation bar

HTML code: HTML <- sorry Stack is not letting me add this as a code

CSS code:

nav {
  width: 1300px auto;
  max-width: 1300px;
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 60px 0;
}

nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  border-width: 3px;
  border-style: solid;
  border-color:white;
  border-radius: 10% / 100%

}

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 18px;
  font-family: "Arial";
  color: white;
  font-size: 20px;
  display: block;
}

nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

Answer 1

Its very easy, you dont even need that div with class vl, my thinking is that you put that div for the vertical line on the right, but there is no need of that, you can make that line with css property border-right

nav ul {
  list-style:none;
  display: flex;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid #333;
}
nav ul li {width: 100%;text-align: center; }
nav ul li:not(:last-child){border-right: 1px solid #888;}
nav ul li a {text-decoration: none; color: #333;}

<nav>
  <ul>
    <li>
      <a href="">About</a>
    </li>
    <li>
      <a href="">experience</a>
    </li>
    <li>
      <a href="">Skills</a>
    </li>
    <li>
      <a href="">Plans</a>
    </li>
    <li>
      <a href="">Portafolio</a>
    </li>
    <li>
      <a href="">Contact</a>
    </li>
  </ul>
</nav>