我的边界半径在所有四个角都不起作用

Question

我正在尝试在所有四个角上使用我的边界半径，但没有成功。有人可以帮助我吗？

我的HTML:

#generic_table .generic_content .generic_head .generic_head_content .head_bg {
  border-color: #8cc63f;
  border-radius: 25px;
}

#generic_table .generic_content .generic_head .generic_head_content .head span {
  color: #fff;
}

#generic_table .generic_content {
  overflow: hidden;
  position: relative;
  text-align: center;
  border-radius: 25px;
}

#generic_table .generic_content .generic_head .generic_head_content {
  margin: 0 0 30px 0;
}

#generic_table .generic_content .generic_head .generic_head_content .head_bg {
  border-style: solid;
  border-width: 45px 1300px 20px 399px;
  position: absolute;
}

#generic_table .generic_content .generic_head .generic_head_content .head {
  padding-top: 15px;
  position: relative;
}

#generic_table .generic_content .generic_head .generic_head_content .head span {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
}

<div id="generic_table">
  <div class="generic_content">
    <div class="generic_head">
      <div class="generic_head_content">
        <div class="head_bg"></div>
        <div class="head">
          <span>AÇÕES</span>
        </div>
      </div>
    </div>
  </div>
</div>

我不知道会发生什么。

PS：我正在做一些测试，我相信我的问题出在 'head_bg'。

Answer 1

这里的填充导致了问题 (div class="head")。如果 padding-top 为 0，则边角更圆润。随着填充的增加，那个 1 个角会变得更平整。

#generic_table .generic_content .generic_head .generic_head_content .head {
    padding-top: 15px;
    position: relative;
}

我的边界半径在所有四个角都不起作用

My border-radius not working in all four corners

html

css

border