Border Radius Hover State

HTML & CSS
1

I’m a newbie to HTML and CSS and was having some trouble with the handling of border-radius on hover states.

At http://sundae.host22.com/ you will notice that the “about” and “works” links display a grey corner.

Is this fixable? Or is it a bug? Couldn’t find anything on the forums, and nothing online either.

Here’s my CSS:

#nav {
    margin: 0 auto;
    padding: 0 auto;
    width: 500px;    
}

#nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#nav li {
    float: left;
    margin: 0;
    padding: 0;
    background: #000;
}

#nav a {
    margin: 0;
    padding: 5px;
    font-family: monospace;
    font-size: 24px;
    float: left;
    width: 150px;
    color: #fff;
    text-decoration: none;
    letter-spacing: .25em;
    text-align: center;
}

#nav a:focus {
    outline: thin dotted;
}

#nav a:hover,
a:active {
    outline: 0;
    color: #000;
    font-weight: bold;
    background: yellow;
}


#nav_left {
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-left-radius: 15px;
}

#nav_left a:hover {
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-left-radius: 15px;
}

#nav_right {
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
}

#nav_right a:hover, a:active {
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
}
2

Hi dhiracheta. Welcome to SitePoint. :slight_smile:

It would be better to remove the background color and border radius from the LIs and just have all that on the <a> elements themselves. Then you avoid any conflicts like this.

3

While, Ralph’s solution is the quickest for THIS SPECIFIC INSTANCE. It may not be an option. Doubling up border radii tends to be tricky and should be avoided when possible. However for those occasions when you can’t, this issue has already been documented can can be usually fixed by applying ( vendor prefix as needed) background-clip: padding-box;

Hope that helps.

4

Thanks ralph.m! That did the trick. I understand my mistake was using less specific application of styles (styling <li> instead of <a>), and it was causing the ‘inactive’ <li> (behind the <a>) to peek over the corner of my active <a>.

dresden_phoenix: Where is that documentation? I’d be interested in looking deeper into it. I had read about the border-clip, but I was unsure about how to apply it, and my attempts to use it failed. Any insight on using it for this instance would be appreciated :slight_smile:

Thanks to the both of you!

5

I had read about the border-clip , but I was unsure about how to apply it, and my attempts to use it failed.

Because much of CSS3 is still in the DRAFT stage, you mus apply background-clip: padding-box; in the same way you apply border-radius ( with vendor prefix attached).

ex:-webkit-background-clip: padding-box;-moz-background-clip: padding-box; background-clip: padding-box;
( all in the same declaration)