empty space before li when adding justify-content:space-around

Question

I'm trying to make a tab using ul/li elements, i used justify-content: space-around, so of-course it add space between the elements, but i can't style the li, when i add for exemple the border, the border is added on the elements and not on the space, so do you have an idea how to fix this.

This is working snippet

ul.tab1 {
    /* reset unordered list to not use default list styles */
    padding: 0;
    margin: 0;
    list-style:none;
    /* add display flex with space around and vertical centering...also stop wrap */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    border: 1px solid #8A4DEE;
    border-bottom: none;
    border-top-left-radius: 12px 12px;
    border-top-right-radius: 12px 12px;
    background-image: linear-gradient(to right, #F9F9F9 , #DDCDFD);
  }

  ul.tab1 li::before {
    padding: 0;
    margin: 0;
    content: none;
  }
  ul.tab1 li a {
    height: 51px;
    color: #8A4DEE;
    border-right: 1px solid #8A4DEE;
    border-bottom: 1px solid #8A4DEE;
    display: table-cell;
    vertical-align: middle;
    padding-right: 30px;
  }
  ul.tab1 li:first-child a {
    padding-left:20px;
  }
  ul.tab1 li:last-child a {
    padding-right:10px;
  }
  ul.tab1 li a.active {
      border-bottom: none;
  }

<ul class="tab1">
    <li><a href="#" class="tablinks active">aaaa</a></li>
    <li><a href="#" class="tablinks">bbbb</a></li>
    <li><a href="#" class="tablinks">cccc</a></li>
    <li><a href="#" class="tablinks">dddd</a></li>
                                                                
                                                                
                                                                
                                                            </ul>

Answer 1

Are you looking for something like this

ul {
      padding: 0;
    margin: 0;
}
ul.tab1 {
    /* reset unordered list to not use default list styles */
    list-style:none;
    /* add display flex with space around and vertical centering...also stop wrap */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    border: 1px solid #8A4DEE;
    border-bottom: none;
    border-top-left-radius: 12px 12px;
    border-top-right-radius: 12px 12px;
    background-image: linear-gradient(to right, #F9F9F9 , #DDCDFD);
  }

  ul.tab1 li::before {
    padding: 0;
    margin: 0;
    content: none;
  }
  ul.tab1 li a {
    color: #8A4DEE;
  }
li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 51px;
  width: 100%;
}
  ul.tab1 li {
    color: #8A4DEE;
    border-right: 1px solid #8A4DEE;
  }
  ul.tab1 li a.active {
      border-bottom: none;
  }
  ul li:last-child {
    border-right: none;
  }

<ul class="tab1">
    <li><a href="#" class="tablinks active">aaaa</a></li>
    <li><a href="#" class="tablinks">bbbb</a></li>
    <li><a href="#" class="tablinks">cccc</a></li>
    <li><a href="#" class="tablinks">dddd</a></li>
    </ul>