No sé por qué, cuando declaro una forma de borde diferente al cuadrado, los bordes se cortan:

Aquí está la plantilla html:

 <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>

y aquí está el 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>

Quiero una forma redondeada de píldora de la barra de navegación, cuando la forma es cuadrada, todo funciona bien, solo quiero cambiar y no pude aunque las clases de arranque y el radio del borde css