border radius and background color

by zoho

HTML

<!-- 当子元素有背景颜色时，父元素的圆角边框将被子元素覆盖而不可见 -->
<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

<ul class="radius">
    <li >First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

CSS

ul {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    border: 1px solid gray;
    border-radius: 4px;
}

li {
    padding: .2em .5em;
}

.radius li {
    background: white;
}

li:hover {
    background: gray;
}