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
}

Answer 1

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;