【CSS】hoverした際にborder-radiusが反映されるようにしたい

Question

###実現したいこと
マウスカーソルを重ねた際にボタンの色が変わるように設定したのですが、border-radiusが反映されません。
丸みを帯びるように変色させるにはどうすれば良いでしょうか。
*画像はボタンの一部をSSで抜粋しています

###各種コード

<div class="picmenu">
    <ul id="table-ul">
        <li>
           <a href=#">  
               <img src="画像.png" alt="全て" class="icon-category">
               <p>全て</p>
           </a>
        </li>
    </ul>
</div>

a:hover {
    text-decoration: none;
    transition: 1.0s;
    color:white;
}

#table-ul {
    border: 1px solid #dee2e6;
    border-radius: 20px;
    z-index: 1;
    will-change: transform;
    display: table;
    table-layout: fixed;
    text-align: center;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    list-style-type: none;
}

#table-ul li {
    border-right: 1px solid #dee2e6;
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    padding:0;
    margin:0;
}

#table-ul li a {
    color: 1px solid #dee2e6;
    display: block;
    font-size: 10px;
    margin: 0;
    padding: 10px;
    text-decoration: none;
}

#table-ul li a:hover {
    background: rgb(14, 66, 238);
    text-decoration: none;
    transition: 0.3s;
}

最低限のコードを記載したつもりですが、不足点ありましたらご指摘いただけますと幸いです。

###試したこと
table-ulにz-index:1;を設定してみましたが、特に変化がありませんでした。

お手数ですがアドバイス頂きたくよろしくお願い致します。

Answer 1

#table-ul に overflow: hidden; を設定する。

Comments

[dit.]

border-radiusに焦点を置いた回答をしてしまいましたがこちらの方がシンプルでいいですね。
丸みの調整をしたい場合などでも修正点1か所で済みますし。

[minari766]

ご回答有り難うございます。

皆様よりご教示いただいた方法いずれも変更可能でしたが、最も汎用性の高いと思われるhatena19さんのご回答をベストアンサーとさせて頂きます。

他の方のご回答もCSSの勉強に非常に役立ちそうです。
皆様、本当に有り難うございました。

Answer 2

いくつかliがあり、1つ目の左上と左下、最後の右上と右下を角丸にしたいのであれば以下のような記述を追加すればいかがでしょうか。

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

Comments

[minari766]

ご回答有り難うございます。
first-child、last-childというものがあるんですね！深堀りしてみます！

Answer 3

a:hover にも border-radius: 20px; を設定してはどうでしょうか？

Comments

[minari766]

ご回答有り難うございます。
hoverにも通常の枠線設定と同じことができたんですね！