css - IE边框半径使边框和背景曲线不同的角

Question

我有一个<div>有一个background和一个border。

我定义border-radius: 10px 0 10px 0了 IE 使边框在右上角和左下角变圆，背景在其他角变圆。

所以我有两个角有方形边框，背景没有到达末端，两个有圆形边框，背景突出。

我应该说当我添加direction: ltr它修复它，但我需要direction: rtl.

如果我指定border-top-right: 10px等，那是一样的。边界将在错误的角落变圆。

Answer 1

围绕它进行黑客攻击算吗？

#div1 {
    direction:rtl;
    border:1px solid black;
    background:green;
    border-radius:10px 0 10px 0;
    margin:20px auto;
    width:300px;
    padding:10px;
    -ms-transform: rotate(180deg);
}
:root #div1 {
    direction: ltr \9; /* IE9+ */
}
#div1 > span {
    direction: rtl;
    -ms-transform: rotate(180deg);
}

环绕文本内容<span>：

<div id="div1">
    <span>some text</span>
</div>