背景（a）与边框（ul）之间的空白

Question

I build a Navigationbar, when you hover or clicked a item the background Color of the selected Item will change.

At the end I wanted to round up the corners. Then I saw that there is a white Space which im unable to remove.

HTML

    <nav id="nav">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#lorem">Lorem</a></li>
            <li><a href="#ipsum">Ipsum</a></li>
            <li><a href="#dolor">Dolor</a></li>
        </ul>
    </nav>

CSS

#nav
{
    position: absolute;
    top: 50px;
    width: 100%;
}
    #nav > ul
    {
        padding: 0;
        margin: auto;
        width: 50%;

        list-style: none;
        display: flex;

        border: 1px solid #673ab7;
        border-radius: 20px;
        background: #ffffff;
    }
        #nav ul > li 
        {
            margin: 0;
            width: 100%;
            color: #673ab7;

            line-height: 40px;
        }
            #nav ul > li > a
            {
                display: block;
                color: inherit;

                text-align: center;
                text-decoration: none;
                text-transform: uppercase;
                letter-spacing: 2px;

                transition: background 0.25s;

                position: relative;
            }
                #nav ul > li > a:hover
                {
                    background: #ede7f6;
                }
                #nav ul > li:first-child > a:hover
                {
                    border-radius:  20px 0px 0px 20px;
                }



            #nav ul > li.active > a
            {
                border-radius:  20px 0px 0px 20px;
                color: #FFFFFF;
                background: #673ab7;
            }

JS

$(document).ready(function()
{
  $("#nav > ul > li").click(function()
  {
    $("#nav > ul > li").each(function()
    {
        $(this).removeClass("active");
    });
    $(this).addClass("active");
  });
});

Demo: http://jsfiddle.net/sdaq97hh/31/

Answer 1

Please add overflow hidden style in ul tag

#nav > ul {
padding: 0;
margin: auto;
width: 80%;
list-style: none;
display: flex;
border: 1px solid #673ab7;
border-radius: 20px;
background: #ffffff;
overflow: hidden;
}

Answer 2

You could target the last li , like this:

#nav ul > li:last-child a {
  border-radius: 0 20px 20px 0px;
}

JSFIDDLE