How to make hover use border-radius first-child
<p>I am working on a small website and I have a menu with the border-radius set to 10px. I am having problem on how to make the hover use the border-radius only on the first and last child. 
Can somebody explain me what am I doing wrong? </p>

<pre><code>&lt;div class="menu"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link 1 &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link 2 &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link 3 &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link 4 &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link 5 &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.menu ul
{
    background: #ede0b3;
    width: 200px;
    box-shadow: 1px 1px 1px 1px grey;
    border-radius: 10px; 
    margin-left: 5px;
} 

.menu ul li
{
    list-style: none;
    border-bottom: 1px solid grey;
}

.menu ul li a
{
    padding: 10px 15px;
    display: block;
    color: black;
    font-weight: bold;
    text-decoration: none; 
}

.menu ul li:last-child
{
    border-bottom: none;

}

.menu ul li a:hover
{
    background: white; 
}

.menu li a:first-child:hover
{
    border-radius: 10px;
}
</code></pre>

<p>Demo: <a href="https://jsfiddle.net/vaydrvcr/" rel="nofollow">https://jsfiddle.net/vaydrvcr/</a></p>