圆角框不起作用 CSS

Question

我试图在我创建的这个 div 框上圆角，但它不起作用。在 Chrome、IE、Firefox 上对此进行了测试，但不行。我不太擅长 CSS 和 DIV。所以如果你能看到我的问题，请帮助我。

代码CSS:

.side-nav-menu{
  width: 100%;
  border-radius: 10px;
}
.side-nav-menu h1{
  font-size: 1.1em;
  font-weight:bold;
  color: white;
  background: #3F5671;
  margin-bottom: 0;
  padding: 7px 0 7px 7px;
}

.side-nav-menu ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid #c0c0c0;
  border-right: 1px solid #c0c0c0;
  margin-bottom: 0;
}

.side-nav-menu ul li{
  padding-bottom: 0px;
  border-bottom: 1px solid #c0c0c0;/
}

.side-nav-menu ul li a{
  font-size: normal 1.1em;
  font-weight:bold;
  color: #777777;
  background: #ffffff;
  display: block;
  padding: 5px 0;
  line-height: 17px;
  padding-left: 7px;
  text-decoration: none;
}
.side-nav-menu ul li a:hover{
  color: #777777;
  background: #F7F7F7;
}

HTML

<div class="side-nav-menu">
  <h1>Sub-Categories</h1>
  <ul>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=18&amp;Itemid=101">Air Sampling Pumps</a></li>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=14&amp;Itemid=101">Dust Monitors</a></li>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=16&amp;Itemid=101">Flame Ionization Detectors</a></li>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=17&amp;Itemid=101">Photoionization Detectors</a></li>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=19&amp;Itemid=101">Ventilation Blower</a></li>
  </ul>
</div>

https://jsfiddle.net/pssz0xv0/

Answer 1

border-radius: 10px

在 .side-nav-menu ?

Answer 2

子元素不会从父元素继承圆角。您必须将边框半径应用到顶部元素 'h1' 和底部元素，最后一个 'a'.

https://jsfiddle.net/pssz0xv0/5/

.side-nav-menu h1{
  border-radius:10px 10px 0 0;
}
.side-nav-menu ul li:last-child a{
  border-radius: 0 0 10px 10px;
}

Answer 3

.side-nav-menu{
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.side-nav-menu h1{
    font-size: 1.1em;
    font-weight:bold;
    color: white;
    background: #3F5671;
    //margin-bottom: 0;
    margin: 0;
    padding: 7px 0 7px 7px;
}

https://jsfiddle.net/alireza_safian/pssz0xv0/9/

圆角框不起作用 CSS

Rounded Box not working CSS

html

css

rounded-corners