今天的演示来自 Lim Chee Aun，他是 Phoenity 图标和主题的创建者，也是马来西亚的一位 Web 开发人员。

border-radius 属性可能是 CSS3 规范 中最有趣的部分之一，它允许您在元素上创建圆角。例如

div {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

在 Firefox 3.5 中，-moz-border-radius 已更新以匹配 CSS3 规范的最新修订版。因此，现在我们可以创建**椭圆形边框**。

那么，这意味着什么？根据规范，语法是

-moz-border-radius: {1,4} [ / {1,4}]?

它显示了此属性接受的一组值，以及一个可选的斜杠和另一组值。这就是魔法的来源。如果给出了两组值，则斜杠之前的值为水平半径，斜杠之后的值为垂直半径。

这打开了一些有趣的功能。此演示显示了您可以尝试的某些形状类型的实验。

在 Firefox 3.5 中查看演示

在演示中，不仅可以修改边框宽度、样式和半径，还可以修改**样式**，例如 ridge、double 和 groove。目前，dotted 和 dashed 还不起作用，并呈现为实线。有关更多信息，请参阅 Mozilla 错误 431176。