html - 曲線に沿って画像の境界線を作成するにはどうすればよいですか?

Question

角の丸い画像を埋め込む JS Fiddle を作成しました。

http://jsfiddle.net/JDRSc/

img タグの CSS は次のとおりです。

img {
  -webkit-border-radius: 20px;
  border: 20px solid #000;
  border-radius: 20px;
}​

画像の境界線を丸みを帯びた角の曲線に合わせるにはどうすればよいですか? 現在、画像自体にはまだ鋭い角があります。

Answer 1

こちらhttp://jsfiddle.net/JDRSc/7/

HTML

<div id="wrapper">
    <img src="http://kittens-for-sale.net/wp-content/uploads/2011/11/kittens-for-sale-5.jpg" alt="" />
</div>

<strong>CSS

#wrapper {
    display:inline-block;
    border: 10px solid black;
    -moz-border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
    -webkit-border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
    border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
}    

img {
    display: block;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}​

Answer 2

境界半径が内側と外側で有効になるように管理するには、border-radius の値を border-size よりも大きくする必要があります。

これで修正されます。

試す：

border-size:10px;
border-radius:15px;

それが動作します。