Html 设置边框底部/顶部右/左半径

我正在用Chrome编辑一个带有“Inspect元素”的页面，以便在提交到CSS样式表之前进行样式编辑

我正在编辑一个<代码>：在列表上的<代码>伪元素之前，显示一个绿色背景的标签符号，并让它看起来像一片叶子，但在完全按照预览中输入的内容保存更改后，它们不会在加载页面时显示

我保存的内容的屏幕截图：                                                               我得到的是：
                                                  

基本上，

边框左上半径

和

边框右下半径

默认为零，但设置为

border-bottom-right-radius: 50px;
border-top-left-radius: 50px; 

让我得到那种效果。起初，我认为浏览器可能更改了

右上边框

和

左下边框

的值，但将它们声明为零并没有改变任何事情。我知道，您在inspect工具中看到的并不总是实际计算的结果

相关的CSS是

content: " ＃";
opacity: 1;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
text-shadow: #175F0A 1px 1px 0px;
margin-right: 11px;
color: #fff;
background: #81B681;
font-weight: bold;
text-align: center;
border-radius: 28px;
padding-left: 6px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 5px;
line-height: 2;
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;

更新这很奇怪-我一直在尝试，它保留了我的风格。。。我猜我在什么地方反驳过，现在看，除非有人能发现

---

最终工作版本要获得该形状，必须设置

.test {
    width: 100px;
    height: 100px;
    top: 20px;
    left: 20px;
    background-color: green;
    border-radius: 100% 0px;
}

由于似乎对半径的百分比存在混淆：边界半径：50%；给你一个圆圈

任何高于该值的值必须与低于50%的“另一侧”匹配才能生效

---

如果我不将第二个（和第四个）角设置为0px，我就无法获得第一个和第三个角的100%

当我通过小提琴运行代码时，结果就像你想要的那样。

也许在代码的其他地方，您正在将右上角和左下角半径设置为0以外的值

---

（我在底部添加了显示，以防止div占用整条线）

你能给jsiddle链接吗？哇，几率有多大！谢谢Josh，很奇怪…也是的，1秒Nikitaok，我想这似乎是正确的。清理了所有垃圾，赤裸裸的JSFIDLE现在在更新的描述中。你必须将0添加到

边界半径中才能得到它吗？只需100%就可以得到一个圆。我一直想知道为什么只有100%的人看起来什么都不做。@Josh Powell border radius没有做你认为的事情。。。这个图表很好地解释了为什么。另外，Lea Verou做了一个很棒的介绍。非常感谢你的链接！我正在查看演示文稿。是的，
边界半径：100%0px是我需要的。谢谢你！
.test {
content: " ＃";
opacity: 1;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
text-shadow: #175F0A 1px 1px 0px;
margin-right: 11px;
color: #fff;
background: #81B681;
font-weight: bold;
text-align: center;
border-radius: 28px;
padding-left: 6px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 5px;
line-height: 2;
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;
    display: inline;
}