CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
mllnd
mllnd

Reputation: 575

CSS rounded corners ignored by a:hover background? (Twitter-Bootstrap)

I'm a little bit confused with the Twitter-Bootstrap navbar and it's rouned corners. I've defined rouned corners for the navbar. And when you hover over the navbar with the cursor, the a:hover background seems to ignore the corners.

Here are some screenshots:

Looks nice with smooth corners.

Normal, with rounded corners.

And this happens on a:hover

And this happens on a:hover

How can I define a:hover in CSS not to override the corners? I know one way is to use image files, but this option is not suitable at the moment.

EDIT:

I've managed to make the left-side a:hover curved using @Radian's code, however, the right-side menu a:hover effects get completely messed up.

This code should add the rouned corners for the first menu link, what it actually does, but with a few unwanted effects.

  .navbar .nav > li:first-child a {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

And the effects are below:

1) This looks okay, just as I need it to be.

2) That however, isn't okay.

JSFiddle: http://jsfiddle.net/maku1337/GD23q and http://jsfiddle.net/maku1337/GD23q/embedded/result/ for more clear view.

Upvotes: 1

Views: 2804

Answers (2)

mllnd
mllnd

Reputation: 575

Posting the final solution for the problem which worked for me:

.navbar .nav > li:first-child a {
 border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;}

Upvotes: 2

Hamed mayahian
Hamed mayahian

Reputation: 2343

i write this code maybe that can help you, that's work in modern browser:

jsfiddle.net/C6zV8/

Upvotes: 3

Related Questions