- border-top-right-radiusプロパティは、ボックスの右上の角を丸くできる設定です。設定次第で丸みを変えられますが、
という方がいるでしょう。
そこで今回は、border-top-right-radiusプロパティの
・使う上で必要な設定
について説明します。
CSSを学び始めた方に役立つ情報なので、ぜひ目を通してみてください。
目次
border-top-right-radiusプロパティとは
border-top-right-radiusプロパティの読み方
border-top-right-radiusの読み方は、「ボーダー-トップ-ライト-レイディアス」です。
radiusは半径を意味しており、border-top-rightは右上を示しています。
border-top-right-radiusプロパティの説明
border-top-right-radiusプロパティは、
ときに使う設定です。
他にもボックスの各角を丸くできるプロパティもあります。
border-top-right-radiusプロパティを使うのは、右上の角のみを変えたいときです。
ですが、border-top-right-radiusプロパティの設定をするには、違うプロパティを組み合わせる必要があります。
何が必要になるのか、この記事内で詳しく解説していきます。
border-top-right-radiusプロパティで利用できる値
border-top-right-radiusプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| length | lengthは、pxやemなど数値に付けることで半径が決まります。 |
| percentage | percentageは、数値に%を付けて半径を決めます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
border-top-right-radiusプロパティの基本的な使い方
border-top-right-radiusプロパティの使い方
border-top-right-radiusプロパティを使ったコードを以下に記述します。
See the Pen
border-top-right-radiusプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
border-top-right-radiusプロパティの値を20pxにすると上記のように、右上の角の半径が変わります。
ですが、「border-top-right-radiusプロパティの説明」でご紹介したように、以下のプロパティも組み合わせることで、右上の角の半径を変えられます。
height：ボックスの高さを指定する
border：境界線のスタイルや太さ、色を指定する
border-top-right-radiusプロパティの値で指定される半径
「border-top-right-radiusプロパティの使い方」で記述した右上の角を丸めるコードを見ていきましょう。
|
1 |
border-top-right-radius:20px; |
border-top-right-radiusプロパティの値で指定できる半径は、「横半径」と「縦半径」の2つです。
上記のように20pxの値が一つならば、横半径と縦半径が同じになります。
それぞれ半径の値が違っているとき、右上の角の丸みも変わってきます。
ですが、横半径と縦半径が違っているからこそできる形もあります。
border-top-right-radiusプロパティとは違う方法で右上の角を丸める
border-top-right-radiusプロパティと違う方法で、右上の角を丸める設定を説明します。
See the Pen
border-top-right-radiusプロパティとは違う方法でborder-top-right-radiusプロパティとは違う方法で右上の角を丸めるを丸める by 吉井大輝 (@DaiW)
on CodePen.
border-top-right-radiusプロパティの他にも、border-radiusプロパティを使うことで同様の設定ができます。
border-radiusプロパティで右角を20pxにするためには、「.box2」のように指定します。
|
1 |
border-radius:0 20px 0 0; |
border-radiusプロパティの値は、「左上」「右上」「右下」「左下」の順に角の半径が指定されます。
border-radiusプロパティは、全ての角を丸められるメリットがあります。
ですが、ボックスの角の半径を細かく設定する場合、値も多くなるため、どこの角を指定しているのか分かりづらくなります。
丸くする角が右上だけで良いのならば、border-top-right-radiusプロパティを設定して確認や修正するとき、分かりやすいです。
ボックスの角を丸める設定に応じて使い分けると、作業時間の短縮やミスの減少につながりますよ。
border-top-right-radiusプロパティの応用的な使い方
border-top-right-radiusプロパティの値を%にしたときの半径
border-top-right-radiusプロパティの値を%にしたとき、半径がどうなるのか見ていきましょう。
See the Pen
border-top-right-radiusプロパティの値を%にしたときの半径 by 吉井大輝 (@DaiW)
on CodePen.
値を%にすると、幅や高さによって半径が変わってきます。
半径を計算すると、「幅30%」「高さ30%」になります。
上記の設定では、幅と高さが同じなので、横半径と縦半径が一緒になります。
つまり、半径の大きさは30pxです。
border-top-right-radiusプロパティの値が%の場合、幅と高さが違うなら横半径と縦半径も変わるので気を付けてください。
まとめ
いかがでしたでしょうか？
今回、基本的な使い方と使う上で必要な設定についてご紹介しました。
border-top-right-radiusプロパティだけでなく、他の角の半径を変えるプロパティと組み合わせて使う方法もあります。
まずは基本からしっかりと覚えていくことで、border-top-right-radiusプロパティを活用できるようになるでしょう。
設定の仕方は、コードを交えて解説をしているので、ぜひ参考にしてください。
参考文献：MDN web docs｜border-top-right-radiusプロパティ: 要素の右上の角を丸めます。
