虚线边框的CSS边框半径

Question

我使用带圆角的虚线边框，但我遇到了问题。角落的颜色比侧边缘更深。我希望所有颜色都一样。

如果您看到我的代码的输出，那么您可以理解该问题。继承我的代码：

<form action="checklogin.php" method="post">
    <table style="border:1px dotted #0000ff;-moz-border-radius:7px;
        -webkit-border-radius:7px;border-radius:7px;" align="center">
        <caption><b>Admin Login</b></caption>
        <tr>
            <td>Username : </td>
            <td><input name="username" id="username" type="text" /></td>
        </tr>
        <tr>
            <td>Password : </td>
            <td><input name="password" id="password" type="password" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input name="submit" id="submit" type="submit" value="Log in" /></td>
        </tr>
    </table>
</form>

请告诉我如何解决。

感谢。

[已解决：非常感谢大家的回复。]

Answer 1

实心角是Firefox（以及其他基于Gecko的浏览器）的限制。 MDN says：

  

虚线和虚线圆角边角在Gecko中呈现为实心;见bug 382721。

Answer 2

为什么不喜欢

<form action="checklogin.php" method="post" style="display:block;border:1px dotted #0000ff;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:10px; width:200px; padding:10px; margin-left:auto; margin-right:auto;"  >
<h2 style="text-align:center; font-weight:bold">Admin Login</h2>
<labe for="username">Username : </label>
<input name="username" id="username" type="text"/>
<labe for="password">Password : </label>
<input name="password" id="password" type="password" />
<input name="submit" id="submit" type="submit" value="Log in" style="display:block" />
</form>​

您将避免使用该表，对于用户而言，更容易在不在左侧的输入上处理标签。您可以在此处查看jsfiddle