Есть код типа такого
<html>
<head>
<meta charset="UTF-8">
<title>тест</title>
<style>
#lkmenu {
width: 400px;
border: 1px solid rgba(0,0,0,.3);
border-radius: 30px;
}
.lbltab {
color: rgba(0,0,0,.6);
display: block;
padding: 10px 20px;
}
.lbltab:hover {
background: rgba(0,0,0,.1);
}
</style>
</head>
<body>
<div id="lkmenu">
<label class="lbltab">Пункт 1</label>
<label class="lbltab">Пункт 2</label>
<label class="lbltab">Пункт 3</label>
<label class="lbltab">Пункт 4</label>
</div>
</body>
</html>
Как сделать, чтобы фон первого и последнего элементов, когда к ним подводят мышку, не вылезал за границу блока lkmenu
? Писать для первого и последнего пунктов меню отдельные классы, в которых закруглять их углы на тот же радиус, или есть более разумное и общепринятое решение?
#lkmenu {overflow: hidden;}