边框半径在Chrome＆amp; Safari浏览器

Question

使用边框半径作为我的图像，图像的边角不会变圆。

但是相同的代码在Mozilla Firefox中正常运行。

CSS：

 body img { 
     border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 3px solid #ed1d24;
    }

Answer 1

首先设置边框，然后覆盖其半径：

 body img { 
    border: 1px solid #ed1d24;
     border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    }

[编辑]

实际上我只能断定它的运作方式是这样或那样的。我自己使用Chrome，这个小提琴中的两个图像都有圆角。

http://jsfiddle.net/aqBA7/

Answer 2

代码中的其他地方一定有错误，border-radius在Google Chrome中完全正常，因为GolezTrol已经显示，您的CSS也是正确的。

尝试打开开发人员工具，检查样式​​是否已正确应用于img元素。

Answer 3

使用包装div并将border和border-radius应用于#wrapper，仅将border-radius应用于内部图片。我将图片上的border-radius缩小了与border的{​​{1}} width相同的数量，以便使用图片正确填充容器。如果你在两个元素上都wrapper相同，那么你会在角落中看到一个微小的间隙，因为border-radius border导致了尺寸的微小差异。

<强> HTML ：

width

<强> CSS ：

<div id="wrapper">
   <img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" width="620" height="388" alt="" /> 
</div>

DEMO tested in Safari:

http://jsfiddle.net/D7MHh/2/

Safari中jsFiddle的屏幕截图：