Bootstrap navbar no border radius?

Question

I'm trying to remove the border and round corner from the nav-bar.

.navbar-default {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

But it does not work, any ideas?

HTML,

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </nav>

Solution 1

".navbar-default" is not cause. To remove the border and round corner from the nav-bar, You should try it:

.navbar {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

Solution 2

Try adding .navbar-static-top in your nav class

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> 
<nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </nav>

Solution 3

This is usually when ur css is loaded before bootstrap css and is getting overwritten. Make sure ur css is defined after bootstrap.

Your code is fine. Have a look at this JSFiddle.

https://jsfiddle.net/0h8muuc3/2/

.navbar-default{
  border: none;
  border-radius: 0;
}

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </nav>

Solution 4

Try this

.navbar-default {border-radius:0 !important;}

Solution 5

BootStrap ships with a border-radius on .navbar of 4px (note, the border-radius is not applied to .navbar-default class).

To overcome this, firstly make sure your custom CSS file is loaded AFTER BootStrap's, and then simply use a parent / child selector to be more specific...

I assume the nav bar is wrapped in an element, such as a div or header element?

@media (min-width: 768px) {
    header .navbar {
        border-radius: 0;
    }
}

Bear in mind that the border-radius kicks in with a media query from 768px and upwards, so ensure to wrap your new style in a media query.

View more solutions

Comments

[statosdotcom]

Another great answer. Thanks.

[poPYtheSailor]

Your explanations are bang-on. But even after using the above snippet & making sure that my custom css is loaded post boostrap css(i am using 3.7.7), this doesn't work for me. How to get rid of that 4px border from 786px and upward??