ひと昔前は、角丸のボックスをつくるのに四隅に角丸の画像を用意したりして、一苦労してました。

もう今ではCSS３で表現できてしまうので、そういった手間がなくなりましたね。

「マイクロソフトは米国時間2016年1月12日に、「Internet Explorer（IE）」バージョン7～10のサポートを終了する。」との事ですし、CSS3でバリバリで行きましょう！
ということで、接頭辞はつけないというポリシーでいきます！
（新しいCSS モジュールを使うためにブラウザごとに接頭辞をつけなくてはいけない場合があるのですが、もうブラウザが新しいものが主流なのでいらないでしょ！っていうことです）

今更ながら自分の備忘録としてメモ。

◆HTML

<div class="radius">
表示する内容
</div>

◆CSS border-radius: 20px; ※ボックスの大きさはwidth: 200px; にしています。

.radius {
border-radius: 20px;
}

◆CSS border-radius: 50px;

.radius {
border-radius: 50px;
}

◆CSS border-radius: 50%; （円になりますね）

.radius {
border-radius: 50%; 
}

◆画像にも角丸を指定することができます

<img src="test.jpg" class="radius">

◆画像にhover指定すればこんな演出もできます

.radius-hover img { 
width: 200px; height: 200px; margin-bottom: 20px;
transition: border-radius 0.2s linear;
}
.radius-hover img:hover {
border-radius: 50%; 
}