ここではborder-radiusプロパティを使ってボックスの角を丸める方法についてお話します。

border-radiusプロパティの使い方

角丸を作るborder-radiusプロパティは次のように指定します。

border-radius:値;

値の部分にはpxなどの単位を使って数値を入れます。この値が円の半径になります。
実際に角丸にしたボックスを見てみましょう。

CSS

.box01{
  border-radius:30px;
}

これは半径30pxで角を丸くした例です。

上記は正円の半径でしたが、楕円で表現することもできます。楕円を設定する場合は、
border-radius:ヨコ / タテ;という形でヨコとタテの値をスラッシュ「/」で区切ります。

実際に見てみましょう。

CSS

.box02{
  border-radius:10px / 50px ;
}

ヨコの半径を10px、タテの半径を50pxで設定しました。

４つ角を個別に設定する方法

先ほどの例では、値をひとつだけ設定して４つ角をまとめて指定しましたが、それぞの角を個別に設定することもできます。それぞれの角を設定する際のプロパティは下記の通りです。

border-top-left-radius: 左上;
border-top-right-radius: 右上;
border-bottom-right-radius: 右下;
border-bottom-left-radius: 左下;

実際に、別々の値を設定するとこんな感じになります。

CSS

.box03{
  border-top-left-radius: 10px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 70px;
}

それぞれの値の差が分かりやすいように差を付けて設定してみました。

border-radiusプロパティのショートハンド

上記の方法でそれぞれの角丸の値を指定する方法も良いですが、ひとつひとつのプロパティを書くのがちょっと面倒ですよね。このような場合はショートハンドを使いましょう。先ほどの設定をショートハンドすると、こんな感じになります。

４つ角の値をショートハンドする方法

４つの角の値がバラバラでそれぞれ設定したい場合は次のようにショートハンドができます。
border-radius: 左上 右上 右下 左下;

.box03{
  border-radius: 10px 30px 50px 70px;
}

左から順番に、左上、右上、右下、左下という形で時計回りに指定されます。ショートハンドは他にもあります。

２つの値で設定：border-radius: 左上と右下 右上と左下;

border-radius:;の値を２つだけ設定すると、左上と右下、右上と左下の角丸の設定ができます。実際に、見てみましょう。

CSS

.box04{
  border-radius:10px 50px;
}

これは左上と右下が10px、右上と左下が50pxの半径になりました。

３つの値で設定border-radius: 左上 右上と左下 右下;

少しややこしい設定ですが、border-radius:;の値を３つ設定すると、左から順番に左上、右上と左下、右下という形で指定できます。実際に見てみましょう。

CSS

.box05{
  border-radius:10px 50px 30px;
}

border-radiusプロパティで正円を作る方法

ボックスが正方形の場合は、１辺の半分の値を設定することで正円が作れます。

.box06{
  border-radius:50%;
}

１辺の半分の値を計算して値に入力しても良いですが、「50%」にしてしまえば簡単ですね。正方形の画像に対してこれを設定すると、四角い画像を丸く編集しなくても見た目が丸くなります。

以上が角丸を作る方法でした。