Html CSS3：为图像添加圆角

我一直在尝试将圆角添加到框架中，但它只在mozilla中起作用，而在chrome或IE中不起作用

我不是将border radius属性添加到image标记，而是添加到canvas标记

canvas {border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;}

有人能提出一些建议吗

---

网站是

请确保为所有浏览器设置半径，如下所示：

canvas {
    -moz-border-bottom-right-radius: 50px; /* Firefox */
    -webkit-border-bottom-right-radius: 50px; /* Safari, Chrome */
    border-bottom-right-radius: 50px; /* CSS3 */

    -moz-border-bottom-left-radius: 50px; /* Firefox */
    -webkit-border-bottom-left-radius: 50px; /* Safari, Chrome */
    border-bottom-left-radius: 50px; /* CSS3 */
}

---

确保为所有浏览器设置半径，如下所示：

canvas {
    -moz-border-bottom-right-radius: 50px; /* Firefox */
    -webkit-border-bottom-right-radius: 50px; /* Safari, Chrome */
    border-bottom-right-radius: 50px; /* CSS3 */

    -moz-border-bottom-left-radius: 50px; /* Firefox */
    -webkit-border-bottom-left-radius: 50px; /* Safari, Chrome */
    border-bottom-left-radius: 50px; /* CSS3 */
}

---

更简洁的版本：

-moz-border-radius: 0 0 50px 50px;
-webkit-border-radius: 0 0 50px 50px;
border-radius: 0 0 50px 50px;

---

基本上顺序是左上角、右上角、右下角、左下角。

稍微干净一点的版本：

-moz-border-radius: 0 0 50px 50px;
-webkit-border-radius: 0 0 50px 50px;
border-radius: 0 0 50px 50px;

基本上顺序是左上角，右上角，右下角，左下角