border-top-left-radius プロパティは、ボックスの角を丸くする設定の一つです。しかし、
と思う方がいるでしょう。
そこで今回は、border-top-left-radius プロパティの
・さまざまな形の作り方
について説明していきます。
目次
border-top-left-radius プロパティとは
border-top-left-radius プロパティの読み方
border-top-left-radius プロパティの読み方は、「ボーダー-トップ-レフト-レイディウス」です。
radiusは、半径を意味する言葉で、border-top-left-radius プロパティでも同様、半径に関わる設定で使われます。
レイディウスの他に、レイディアスという読み方もしますが、radiusをラディウスと間違えてしまう方もいます。
読み間違えると、相手に誤って伝わってしまう恐れがあります。
border-top-left-radius プロパティの説明
border-top-left-radius プロパティは、
ときに使います。
border-top-left-radius プロパティに値を入れることで、左上の角の半径が変わって丸くなります。
細かく設定をするとさまざまな形にできますよ。
border-top-left-radius プロパティで利用できる値
border-top-left-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-left-radius プロパティの基本的な使い方
border-top-left-radius プロパティの使い方
ボックスの左上の角を丸くするために、border-top-left-radius プロパティをどのように使うのかコードを含めて説明していきます。
See the Pen
border-top-left-radius プロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
基本的な使い方である正方形の左上の角を丸めた設定が上記のコードです。
まず正方形を作るためには、以下のように幅と高さを決める設定を記述します。
|
1 2 |
width:200px; height:200px; |
次にボーダーのスタイルや太さ、色を設定していきます。
|
1 |
border:solid 5px #000; |
ここまでが正方形を作るために必要なコードです。
「幅と高さ」と「ボーダー」の2つの設定があって左上の角を丸めるborder-top-left-radius プロパティの設定ができるようになります。
border-top-left-radius プロパティで値を2つ指定する
border-top-left-radius プロパティの値には、以下のような意味があります。
2つ目：縦半径
上記を踏まえて「border-top-left-radius プロパティの使い方」のborder-top-left-radius プロパティの値を見てみましょう。
|
1 |
border-top-left-radius:40px; |
値が40px一つのみ指定されているときは、横半径と縦半径が40pxになります。
値を2つにして同じ半径にするためには、以下のように記述します。
See the Pen
border-top-left-radius プロパティで値を2つ指定する by 吉井大輝 (@DaiW)
on CodePen.
値を2つにすると、横半径と縦半径の長さをそれぞれ変えられるので、値が一つよりもさまざまな形を作り出せます。
border-top-left-radius プロパティを利用してさまざまな形を作ってみる
border-top-left-radius プロパティで%を指定して形を変える
border-top-left-radius プロパティで%を指定して形を変えてみます。
See the Pen
border-top-left-radius プロパティで%を指定して形を変える by 吉井大輝 (@DaiW)
on CodePen.
上記の設定は、幅半径が30pxで縦半径を80%にしています。
横半径の30pxは、「border-top-left-radius プロパティの基本的な使い方」で説明した通りです。
しかし、縦半径の80%は、高さに応じて変わります。上記のコードの場合、高さが100pxなので、「100px*80%」になります。
結果、縦半径の長さは80pxとなります。
横半径が%の場合は、高さではなく「幅*数値%」になります。
borderプロパティのスタイルを変えてみる
上記のborder-top-left-radius プロパティの半径をそのままにしてborderのスタイルを変えてみます。
See the Pen
borderプロパティのスタイルを変えてみる by 吉井大輝 (@DaiW)
on CodePen.
borderで1本線から2本線にするだけで、印象が違ってきます。
border-top-left-radius プロパティの設定に加えて、borderの設定にも目を向けてみてください。
まとめ
いかがでしたでしょうか？
今回、border-top-left-radius プロパティの基本的な使い方やさまざまな形の作り方をご紹介しました。
border-top-left-radius プロパティは、他と違った見せ方をしたいときなど、使い方次第でサイトのクオリティの向上につながります。
実際にボックスの左上の角を調整したコードを記述しているので、参考にすれば設定することができるでしょう。
ぜひ自分の手で設定をしてみてください。
参考文献：MDN web docs｜border-top-left-radius プロパティ:要素の左上の角を丸めます。
