Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by nicholas maddren
nicholas maddren
12,793 Points

Why has my navbar suddenly got a border-radius?

If you take a look at my nav bar example: http://www.dealerbyte.co.uk/ You can see that the container of the nav's edges are rounded just like a border-radius however looking through my CSS I can't find anything causing it. I've literally just noticed it.

Any idea why this is happening?

5 Answers

David Curtis
David Curtis
11,301 Points
David Curtis
David Curtis
11,301 Points

style.css line 19 is adding 5px border radius.

if you right click and inspect the element, you can see the styling that is being applied and then untick the boxes if you want to see it without the border radius applied.

eck
eck
43,038 Points
eck
eck
43,038 Points

bootstrap.min.css also has declared a border-radius for .navbar. If you declared a value of 0 for the border-radius on line 19 of style.css it should be remedied.

nicholas maddren
nicholas maddren
12,793 Points

Thanks for the help guys I should have picked up on that myself :)

One question... does overriding bootstrap CSS cause issues or is it bad practice? Thanks

Michael Collins
Michael Collins
433 Points
Michael Collins
Michael Collins
433 Points

You do have a border-radius in styles.css, line #19

.navbar {
    border-left: medium none;
    border-radius: 5px;
    border-right: medium none;
}
geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

It seems you added it. Unless you are using an existing css to create your website. Here is where the border-radius is applied.

.navbar {
    border-radius: 5px;
    border-left: none;
    border-right: none;
}

In style.css line 19.

nicholas maddren
nicholas maddren
12,793 Points

Okay so when I remove that line it still appears. When I set it to 0px it disappears :S

David Curtis
David Curtis
11,301 Points

yes, it can still appear b/c bootstrap is applying a border radius of 4px which you had overridden w/ your 5px one. once you removed yours, bootstrap kicked back in. but if you leave yours and set to 0px, you're good to go (as you said).

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

It comes from bootstrap's css, if you want to delete, rewrite this rule in your own css file and apply a value of 0 instead.

.navbar {
    border-radius: 4px;
}

You should really use the webdevloper tool, that helps to figure out things like that.