Question

I really don’t know how to explain what’s going on, so I’ll just show some screenshots:

I set the bottom ‘li’ in my webpage to have a border-radius of 20px. I set the ‘li’s to grow when I hover over them. However, as seen in the second picture, part of the background image is ‘leaking’ over into the ‘li’.

ul {
    height: 30px;
    margin: 0; padding: 0;
    position: absolute;
}

ul li {
    line-height: 30px;
    float: left;
    list-style-type: none;
    margin: 0; padding: 0;
    font-size: 18px;
}

ul li a {
    display: block;
    height: 30px;
    padding: 5px 10px;
}

.subnav {
    height: 50px;

    width:105px;
    z-index: 9999;
    top:0px;
    margin-right:60px; padding: 0;
    transition:0.3s 0s;
    -webkit-transition:0.3s 0s;
    -moz-transition:0.3s 0s;
    -o-transition::0.3s 0s;
    opacity:0;
}

.subnav:hover {
    height: 200px;
    opacity:1;
    transition-delay:0;
    -webkit-transition-delay:0;
    -o-transition-delay:0;
    -moz-transition-delay:0;
}

.subnav li {
    clear: left;
    height: 30px;
    z-index: 9999;
    background: #c1c1c1;
    width: 100%;
    height: 25px;
    font-size: 15px;
    line-height: 20px;
    transition:0.3s 0s;
    -webkit-transition:0.3s 0s;
    -moz-transition:0.3s 0s;
    -o-transition::0.3s 0s;


}

.subnav li:hover
{

    -moz-box-shadow:0px 0px 0px 6px #c1c1c1;
    transition-delay:0;
    -webkit-transition-delay:0;
    -o-transition-delay:0;
    -moz-transition-delay:0;
}

.subnav li:first-child {
    clear: none;
    background:transparent;
    font-size:xx-large;
    line-height: 50px;
    border-bottom-left-radius:0px;
    height: 50px;
    margin-right:60px;
    float:left;
    -moz-box-shadow:none;
}

.subnav li:first-child:hover
{

}



.subnav li:last-child
{
    border-bottom-right-radius:5px;
    border-bottom-left-radius:20px;
}

Here’s the relevant HTML:

<div id="item1"><a href="Tutorials.html">Tutorials</a>
                    <li>
                        <ul class='subnav'>
                            <a href="Tutorials.html"><li></li></a>

                            <li style="z-index:5">After Effects</li>
                            <li style="z-index:4">Photoshop</li>
                            <li style="z-index:3">Web design</li>
                            <li>Programming</li>
                            <li>Computers</li>
                        </ul>
                        </li>
                    </div>
                    <a href="Blog.html"><div id="item2">Blog</div></a>
                    <a href="News.html"><div id="item3">News</div></a>
                    <a href="Contact.html"><div id="item4">Contact</div></a>

Answer 1

I can’t see any problem. Your images show that the rounded corners behave exactly like you have putted it in your css.

The “leaking what you decribe is because you set a rounded border over a rounded border with different radi. You must play a bit around with some number to close the gap.

.subnav li:hover
{

    -moz-box-shadow:1px 0px 0px 6px #c1c1c1;
    transition-delay:0;
    -webkit-transition-delay:0;
    -o-transition-delay:0;
    -moz-transition-delay:0;
}

Play with the first pixel value in the box-shadow a bit, that might help. You can try to shift it with it 1 or 2 pixel to the right.