Html 图像上的圆角

我希望在图像顶部的两个角上都有圆角。从技术上讲，它是存在的，但被图像所覆盖。我浏览了整个网络，看到人们谈论溢出：隐藏甚至JavaScript（我希望尽量避免使用），但我似乎从未能够在现有的代码段上实现它

提前谢谢

<section class="container">
    <header>
        <img src="http://i.imgur.com/CpL8u.png" style="box-shadow: 0px 0px 10px #888;" />
    </header>
    <section class="body">
        Lorem ipsum blahblah I don't know the rest.
    </section>
</section>

---

您需要在该图像中添加一个

边界半径

：

要使实际图像圆整，您必须确保

标记的类实际具有

边界半径

属性。例如：

用剪贴工具复制图片并粘贴到油漆中

选择圆角矩形形状并将颜色更改为白色

选择矩形的最大尺寸

然后将白色圆形边框放在图片周围

然后复制并粘贴所需的圆形图片

---

您可以提供有效的img。顺便说一句，Chrome中有一个非常恼人的错误，它没有在“圆形”容器中圆形化图像。@RokoC.Buljan对不起，我的一个朋友还没有为我创建一个标题。添加

overflow:hidden到
部分。容器
@Stefan谢谢，你的解决方案似乎有效。哇，1998！！：）
<img class="roundrect" src="/whatever-your-source-is.png">

.roundrect {
border-radius: 15px;
}