概要
CSSプロパティ｢border-radius｣は、ボックスや画像などの要素に対して、4つのコーナーの角丸を一括で指定するショートハンドです。4つの角を別々に指定する場合は border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radiusを使用します。
<div>
角丸指定なし
</div>
<div class="border-radius">
角丸をつけたボックスです
</div>
<style>
div {
border: 1px solid #000;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}
.border-radius {
border-radius: 50px;
}
</style>値の指定方法
基本的な指定方法です。ショートハンドプロパティなので、最大４つの値を指定することができます。またスラッシュで値を区切ると、角丸の水平方向と垂直方向を別々に指定することもできます。のちほどいくつかの例を紹介していきます。
{ border-radius: 値(1つから4つ)}
{ border-radius: 値 / 値}実数値 + 以下のような単位で指定します。０を指定すると角は四角になります。マイナス値は指定できませんので、注意しましょう。
| 値 | 説明 |
|---|---|
| 値 | px, em, %などで指定。マイナス値は指定できません。 |
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
値を1つ指定した場合
4辺の値を一括で指定した場合です。下のボックスは50%を指定しました。そうすると形が大きく変化したのが確認できます。
<div class="border-radius">
４辺の値を一括指定
</div>
<div class="border-radius-50">
４辺の値を一括指定
</div>
<style>
div {
border: 1px solid #000;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}
.border-radius {
border-radius: 10px;
}
.border-radius-50 {
border-radius: 50%;
}
</style>4辺をそれぞれ指定した場合
CSSプロパティ padding や margin と同様に４辺をそれぞれ指定することができるプロパティなので、2つ以上の値を指定してみます。
<div class="border-radius-2">2辺の値を指定。</div>
<div class="border-radius-3">3辺の値を指定</div>
<div class="border-radius-4">4辺の値を指定</div>
<style>
div {
border: 1px solid #000;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}
.border-radius-2 {
border-radius: 10px 20px;
}
.border-radius-3 {
border-radius: 10px 20px 30px;
}
.border-radius-4 {
border-radius: 10px 20px 30px 40px;
}
</style>４辺は「左上」を起点に、「右上」、「右下」、「左下」の時計回りの順番で指定できます。
２つの値をいれると「左上、右下」、「右上、左下」が同じ値で指定されます。3つの値をいれると「左上」、「右上、左下」、「右下」に値が反映されます。
なんだか難しく聞こえますが、まずは起点位置と時計回りの順番で指定されることを覚えておきましょう。
スラッシュで値を区切った場合
水平と垂直の長さを変更することでちょっと変わった変化もつけることができます。指定方法はスラッシュで区切ります
{ border-radius: 水平方向の値 / 垂直方向の値 }
<p>※水平方向の値を大きめに指定</p>
<div class="border-radius-horizontal">水平と垂直でそれぞれ値を指定。</div>
<p>※垂直方向の値を大きめに指定</p>
<div class="border-radius-vertical">水平と垂直でそれぞれ値を指定。</div>
<style>
div {
border: 1px solid #000;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}
.border-radius-horizontal {
border-radius: 50% / 10px
}
.border-radius-vertical {
border-radius: 10px / 50%
}
</style>使用例
背景画像への指定も可能なので、サムネイルの装飾を実装してみます。
<img class="border-radius-1" src="https://www-creators.com/wp-content/uploads/2017/06/pexels-photo-176400.jpeg" alt="サンプル画像" width="150" height="150">
<img class="border-radius-2" src="https://www-creators.com/wp-content/uploads/2017/06/pexels-photo-176400.jpeg" alt="サンプル画像" width="150" height="150">
<style>
.border-radius-1 {
border-radius: 50%;
}
.border-radius-2 {
border-radius: 50% 15%;
}
</style>