I don't know why, when I declare a border shape different from square the edges are cut:

Here's the html template:

  <template>
<div class="navbar-container rounded-pill">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item text-center">
          <a class="nav-link" href="#">111</a>
        </li>
        <li class="nav-item text-center">
          <a class="nav-link" href="#">222</a>
        </li>
        <li class="nav-item text-center">
          <a class="nav-link" href="#">333</a>
        </li>
        <li class="nav-item text-center">
          <a class="nav-link" href="#">444</a>
        </li>
        
      </ul>
    </div>
  </div>
</nav>
</div>    
</template>

and heres the css:

  <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.navbar-container {
    box-sizing: border-box;
    margin: 0.5rem;
    height: 100%;
    width:60%;
    border: 2px solid red;
    margin-left: 20%;
    background-color: transparent;
}

nav {
    background-color: white !important;
    font-size: 1.3rem !important;
}

 nav ul li a {
     padding-inline: 1rem !important;
 }

</style>

I want a pill-rounded shape of the navbar, when the shape is square, everthing works fine, i just want to change and i couldnt though bootstrap classes and css border radius