html - 边框半径仅适用于 div 的一侧

Question

当我遇到问题时，我目前正在一家小型企业的网站上工作，当我尝试将边框半径应用于 div 时，它只将其应用于左侧，我在 google 和 stack overflow 中搜索了一个类似的答案，但没有找到任何东西。

    body
    {
    background-color: #e0e0e0;
    }

    #banner
    {
    background-color: #404040;
    height: 10em;
    border-radius: 1em;
    box-shadow: -0.1em 0.3em;
    }

    #bannerimg
    {
    height: 65%;
    margin-left: 1em;
    margin-top: 1em;
    }

    #container
    {
    margin-left: 20em;
    margin-top: -7em;
    overflow: hidden;
    border-radius: 1em;
    }

    .list
    {
    float: left;
    padding: 1.5em;
    font-size: 2em;
    color: #067411;
    background-color: #e0e0e0;
    }

    <header id="banner">
     <div id="container">
      <a class="list">Services</a>
      <a class="list">Remote Support</a>
      <a class="list">Home</a>
      <a class="list">About Us</a>
      <a class="list">Contact Us</a>
     <div>
    </header>

如果有人有答案，将不胜感激

Answer 1

背景颜色与标题 div 重叠。

    body
    {
    background-color: #e0e0e0;
    }

    #banner
    {
    background-color: #404040;
    height: 10em;
    border-radius: 1em;
    box-shadow: -0.1em 0.3em;
    }

    #bannerimg
    {
    height: 65%;
    margin-left: 1em;
    margin-top: 1em;
    }

    #container
    {
    margin-left: 20em;
    margin-top: -7em;
    overflow: hidden;
    border-radius: 1em;
    }

    .list
    {
    float: left;
    padding: 1.5em;
    font-size: 2em;
    color: #067411;
    /*background-color: #e0e0e0;*/
    }

    <header id="banner">
     <div id="container">
      <a class="list">Services</a>
      <a class="list">Remote Support</a>
      <a class="list">Home</a>
      <a class="list">About Us</a>
      <a class="list">Contact Us</a>
     <div>
    </header>