Hiding border-radius hover overflow color

Question

I have a PHP search script that parses the results through HTML to be styled. When one of the results is hovered over it is highlighted blue. The results are shown inside which uses border radius to give it curved edges. However, when you hover over a result at the top or bottom of the box where the curves are, the blue overflows the curves. How can I solve this issue?

My HTML is:

<a href='{$row['url']}' class='result'>
    <div class='title'>{$row['title']}</div>
    <div class='url'>{$row['url']}</div>
    <div class='desc'>{$row['description']}</div>
</a>

My CSS is:

#results{
    background:#fff;
    filter:alpha(opacity=80);
    opacity:0.8;
    color:#000;
    width:75%;
    float:left;
    border-radius:0 10px 10px 10px
}

.result{
    font:12px Verdana,Arial,Helvetica,sans-serif;
    display:block;
    padding:7px
}

.result:hover{
    background-color:#d5e2ff
}

I can't seem to replicate your problem. Can you post a screenshot? — Chris
– Chris, Commented Jul 16, 2011 at 9:43
just a note, you can't add block-level elements such as div in inline elements such as a w3.org/TR/html4/struct/global.html#h-7.5.3 — Sotiris
– Sotiris, Commented Jul 16, 2011 at 9:47
Thanks. I was assuming that #results was a typo intended to be .result, but if not then I think pixelfreak's answer below should help. — Chris
– Chris, Commented Jul 16, 2011 at 9:50

pixelfreak · Accepted Answer · 2011-07-16 09:47:09Z

5

You are putting the border-radius on #results, but you are adding background-color on .result

I assume #results is a container of .result?

If you want the rounded corner bg to be applied to the individual .result, then put border-radius there. But if you want it applied to the overall container, then apply the background-color to #results

Also, you need to handle border-radius for FF by adding -moz-border-radius:0 10px 10px 10px;

answered Jul 16, 2011 at 9:47

pixelfreak

17.9k12 gold badges92 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pixelfreak Over a year ago

Depending on version. Since FF 4.0. Here's the doc

Karl Nicoll Over a year ago

@Callum - Testing in JS Fiddle, adding border radius to .result instead of #results seems to fix your issue. See here: jsfiddle.net/YBc7r/1

Karl Nicoll Over a year ago

@Callum - My mistake, you need to have it in both #results and .result.

Collectives™ on Stack Overflow

Hiding border-radius hover overflow color

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related