Я создаю меню настроек для одного из моих сайтов, а внутри .line divs нет border-radius вверху.
Вот как это выглядит нормально:
И когда я по какой-то причине наводю курсор на первый (и последний), он не имеет границы-радиуса:
Вот мой CSS:
<style type="text/css">
#prefs_tab {
color: black;
background: white;
padding: 6px;
border: 1px solid black;
border-top: 0 !important;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer !important;
position: absolute;
top: 0;
left: 10px;
height: 20px;
}
#settings {
position: absolute;
top: 35px;
left: 10px;;
border: 1px solid black;
background: #fff;
border-radius: 10px;
width: 130px;
}
.line {
padding: 5px;
vertical-align: middle;
border-bottom: 1px solid black;
cursor: pointer;
}
.line:hover {
background: #ccc;
}
</style>
И мой HTML:
<div id="prefs_tab">Preferences</div>
<div id="settings" style="display: none;">
<div class="line" id="snow_off">Turn snow off</div> <!--will turn to "turn snow on" when clicked -->
<div class="line" id="hide_bar">Hide bottom bar</div>
<div class="line" id="music_on" style="border-bottom: 0 !important;">Turn music off</div>
</div>
Я не вижу, что я делаю неправильно. Есть ли способ исправить это без добавления border-radius в обе коробки?