『border-radius』は、
値として指定された数値の半径の円弧をベースにした角丸を実装します。

正円にしたいときは、値を『50%』とします。

左上への指定は、
border-top-left-radius:値;
-webkit-border-top-left-radius:値;
-moz-border-radius-topleft:値;
となります。

右上への指定は、
border-top-right-radius:値;
-webkit-border-top-right-radius:値;
-moz-border-radius-topright:値;
となります。

左下への指定は、
border-bottom-left-radius:値;
-webkit-border-bottom-left-radius:値;
-moz-border-radius-bottomleft:値;
となります。

右下への指定は、
border-bottom-right-radius:値;
-webkit-border-bottom-right-radius:値;
-moz-border-radius-bottomright:値;
となります。

・左上だけを角丸にする
・右上だけを角丸にする
これらの記述で再現できます。

・左下だけを角丸にする
・右下だけを角丸にする
これらの記述で再現できます。

・左下だけを角丸にする
・右上だけを角丸にする
これらの記述で再現できます。

・左上だけを角丸にする
・右下だけを角丸にする
これらの記述で再現できます。

値をパーセンテージで指定することで実装できます。

※ 解説については、最終の「border-radiusについて」をご覧ください。

値をピクセルで指定することで実装できます。

仕組みは、
・歪んだ円を作成する
こちらの内容の応用となります。

border-radiusプロパティは、要素の境界の外側の角を丸めます。
1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。
楕円は、border-radius: 10px 20px; の様な記述で再現できます。

水平方向と垂直方向の半径の指定は、スラッシュ（ / ）で区切ります。
スラッシュの前後に水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順（左上を基準に時計回り）で指定します。

尚、ここまでの記述では、
ベンダープレフィックスの記述も加えてあります。
-webkit-border-radius → Safari、Chrome
-moz-border-radius → Firefox
必要に応じて記述をすれば良いので、基本的には、border-radius のみでOKです。