title: Border outline cannot be removed
body: <p>I am using a bootstrap navbar and trying to get rid of border but it doesn't go!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar
  {
   height: 100px;
  }
  
  .navbar-default
  {
   /*background-color: #0050A0;*/
   background-color: white;
   border-radius: 0;
   -moz-border-radius: 0;
   border-color: none;
   border: 0 !important
   background: -moz-linear-gradient(left, white 0%, white 45%, #12A8E0 85%, #0050A0 100%);
  
  }
  
  .flash_navbar a
  {
   color: black !important;
  }
  
  .search_form
  {
   width: 70%;
  }
  
  .nav_form
  {
   border-radius: 0;
   margin-top: 27px;
  }
  
  #searchBar
  {
   border-color: #0050A0;
  
  }
  
  #searchButton
  {
   background-color: #0050A0;
   color: white;
   border: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
     &lt;link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet" type="text/css"&gt;
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    
    &lt;div class="flash_navbar"&gt;
    &lt;nav class="navbar navbar-default"&gt;
     &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
       &lt;button type="button" class="navbar-toggle" id="collapse_button" data-toggle="collapse" data-target="#myNavbar"&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;&lt;/a&gt;
      &lt;/div&gt;
  
       &lt;form class="search_form" action="/product/search" method="POST"&gt;
        &lt;div class="input-group"&gt;
         &lt;input type="text" class="form-control nav_form" placeholder="Search" id="searchBar" /&gt;
         &lt;div class="input-group-btn"&gt;
          &lt;button class="btn btn-default nav_form" type="submit" id="searchButton"&gt;
          &lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;
          &lt;/button&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/form&gt;
      
     &lt;/div&gt;
    &lt;/nav&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the actual result in my browser. Snipplet doesnt seem to give correct result.</p>
  
  <p><a href="https://i.stack.imgur.com/ozden.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ozden.png" alt="Actual navbar"></a></p>
  
  <p>I want to remove it's outline or border</p>