title: How to make toggle button border (as shown) invisible?
body: <p><a href="https://i.stack.imgur.com/eoZNG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eoZNG.png" alt="as you can see reddish border around toggle button" /></a></p>
  <p>As you can see dark red border around toggle button</p>
  <p>I use</p>
  <pre><code>.navbar-toggle
    {
     border : none;
  
     outline : none;
    }
  </code></pre>
  <p>to remove it but nothing works.</p>
  <p><strong>Below given my <code>html</code> code</strong></p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/style.css&quot;&gt;
      &lt;!-- &lt;link rel=&quot;stylesheet&quot; --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;!-- &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;font-awesome-4.7.0/css/font-awesome.min.css&quot;&gt; --&gt;
      
      &lt;title&gt; Agency website &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
    &lt;section id=&quot;navbar&quot;&gt;
      &lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light&quot;&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;/logo.png&quot; alt=&quot;website&quot;&gt;&lt;/a&gt;
    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
      &lt;!-- &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt; --&gt;
      &lt;i class=&quot;fas fa-bars&quot;&gt;&lt;/i&gt;
       
        &lt;!-- &lt;i class=&quot;fas fa-tree&quot;&gt;&lt;/i&gt; --&gt;
    &lt;/button&gt;
  
    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
      &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
        &lt;li class=&quot;nav-item active &quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Services&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item &quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;About Us&lt;/a&gt;
          
         
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link &quot; href=&quot;#&quot;&gt;Testinmial&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link &quot; href=&quot;#&quot;&gt;Contact Us&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/section&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot; integrity=&quot;sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js&quot; integrity=&quot;sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://kit.fontawesome.com/355cdf5292.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>Below <code>css</code> code</strong></p>
  <pre><code>    margin:0;
      padding:0;
  
  }
  
  /* navigation bar section  */
  #navbar
  {
      position:sticky;
      z-index:10;
      background-image: linear-gradient(to right ,#9517ba ,#5f1782);     /* yaha ni chali yeh line ( doubt ) */ 
  }
  .navbar
  {
      background-image: linear-gradient(to right ,#9517ba ,red);
      padding: 0px;
  
  }
  .navbar-brand img{
  
      height:50px;
      width:100px;
      /* color:blue; */
  }
  .navbar-nav li
  {
      padding: 0 10px;
  }
  
  .navbar-nav li a
  {
      color:white ! important;
      /* float: right; */
      text-align: right;
  }
  .fa-bars
  {
      color: #fff;
      font-size: 20px !important;
  }
  .navbar-toggler
  {
      outline:transparent;
      border-color:transparent;
      padding:0;
      background: none;
  }
  </code></pre>