title: When i change the shape of navbar, the edges are cut
body: <p>I don't know why, when I declare a border shape different from square the edges are cut:
  <a href="https://i.stack.imgur.com/sUN2Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sUN2Y.png" alt="enter image description here" /></a></p>
  <p>Here's the html template:</p>
  <pre><code>  &lt;template&gt;
  &lt;div class=&quot;navbar-container rounded-pill&quot;&gt;
  &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
      &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
        &lt;ul class=&quot;navbar-nav mx-auto&quot;&gt;
          &lt;li class=&quot;nav-item text-center&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;111&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item text-center&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;222&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item text-center&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;333&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item text-center&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;444&lt;/a&gt;
          &lt;/li&gt;
          
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/div&gt;    
  &lt;/template&gt;
  </code></pre>
  <p>and heres the css:</p>
  <pre><code>  &lt;style scoped&gt;
  @import url('https://fonts.googleapis.com/css2?family=Pacifico&amp;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;
   }
  
  &lt;/style&gt;
  </code></pre>
  <p>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</p>