title: removing the borders of the navbar's button in Bootstrap 3
body: <p>I'm creating a webpage and let's say I've got this navbar: (Courtesy <a href="http://www.tutorialspoint.com/" rel="nofollow noreferrer">TutorialsPoint</a>)</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" role="navigation"&gt; 
     &lt;div class="navbar-header"&gt; 
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse"  
           data-target="#example-navbar-collapse"&gt; 
           &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; 
           &lt;span class="icon-bar"&gt;&lt;/span&gt; 
           &lt;span class="icon-bar"&gt;&lt;/span&gt; 
           &lt;span class="icon-bar"&gt;&lt;/span&gt;
         &lt;/button&gt; 
        &lt;a class="navbar-brand" href="#"&gt;TutorialsPoint&lt;/a&gt; 
     &lt;/div&gt; 
     &lt;div class="collapse navbar-collapse" id="example-navbar-collapse"&gt; 
        &lt;ul class="nav navbar-nav"&gt; 
           &lt;li class="active"&gt;&lt;a href="#"&gt;iOS&lt;/a&gt;&lt;/li&gt; 
           &lt;li&gt;&lt;a href="#"&gt;SVN&lt;/a&gt;&lt;/li&gt; 
           &lt;li class="dropdown"&gt; 
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 
                 Java &lt;b class="caret"&gt;&lt;/b&gt; 
              &lt;/a&gt; 
              &lt;ul class="dropdown-menu"&gt; 
                 &lt;li&gt;&lt;a href="#"&gt;jmeter&lt;/a&gt;&lt;/li&gt; 
                 &lt;li&gt;&lt;a href="#"&gt;EJB&lt;/a&gt;&lt;/li&gt; 
                 &lt;li&gt;&lt;a href="#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt; 
                 &lt;li class="divider"&gt;&lt;/li&gt; 
                 &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; 
                 &lt;li class="divider"&gt;&lt;/li&gt; 
                 &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt; 
              &lt;/ul&gt; 
           &lt;/li&gt; 
        &lt;/ul&gt; 
     &lt;/div&gt; 
  &lt;/nav&gt;
  </code></pre>
  
  <p>This creates borders like this:
  <a href="https://i.stack.imgur.com/qQOjX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qQOjX.jpg" alt="borders!"></a>
  codepen.io/aravind-forever/pen/WGQXzL</p>
  
  <p>I want to remove the borders from both the <code>button</code> and the <code>nav</code>. How do I do this? I've tried <code>border: none</code> but that does not work.</p>
  
  <p><em>Merci d'avance!</em></p>