title: Rounded edges on menu items in bootstrap
body: <p><a href="https://i.stack.imgur.com/ioTth.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ioTth.png" alt="My navbar"></a></p>
  
  <p>I am trying to round the edges on my navbar. I ended up adding a border radius to every item in the hierarchy, but it still does not work. All the edges are sharp. How do I fix this?</p>
  
  <p>Markup:</p>
  
  <pre><code> &lt;div id="menystrip" class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div id="menutitems" class="container"&gt;
              &lt;div id="menustrip" class="navbar-collapse collapse"&gt;
                  &lt;ul id="menustripul" class="nav navbar-nav"&gt;
                      &lt;li id="menuitemtoday" class="active"&gt;&lt;a href="/"&gt;Idag&lt;/a&gt;&lt;/li&gt;
                      &lt;li id="menuitemtomorrow" class=""&gt;&lt;a href="/Movies/MoviesTomorrow"&gt;Imorgon&lt;/a&gt;&lt;/li&gt;
                      &lt;li id="menuitemdayaftertomorrow" class=""&gt;&lt;a href="/Movies/MoviesTheDayAfterTomorrow"&gt;P&amp;#229; tisdag&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#menustrip {
      border-radius:15px;
  }
  
  #menustripul {
     border-radius: 15px;
  }
  
  #menutitems {
      padding-top: 15px;
      padding-bottom: 15px;
      border-radius: 15px;
  }
  
  #menuitemtoday {
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
  }
  
  #menuitemdayaftertomorrow {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
  }
  </code></pre>
  
  <p>Edit: This is what style every item gets when I use the dev tools in chrome, please note that the bottom three are overridden (a dash shrough them):</p>
  
  <pre><code>#menutitems {
      padding-top: 15px !important;
      padding-bottom: 15px !important;
      border-radius: 15px !important;
  }
  #menutitems {
      padding-top: 15px !important;
      padding-bottom: 15px !important;
      border-radius: 15px !important;
  }
  </code></pre>