【CSS】border-radiusとは？～要素の角を丸くする方法～
【CSS】border-radiusの解説です。読み方は「ボーダーレイディウス」
要素の角を丸くする方法を知りたい方はこちらで解決します💡
もくじ
●【実例】border-radiusはこう打てば、こうなる
●【使い方】border-radiusは実際にこう使う
●【特徴】border-radiusの持つ特徴
●【注意】border-radiusを使う時に起こりやすいミスの事例
●border-radiusに似た効果を持つCSS
スポンサードサーチ
【CSS】border-radius ～要素の角を丸くする方法～
具体的に解説していきます。
【実例】border-radiusはこう打てば、こうなる
☝このように打つことで
☟このように横幅を指定できます。
【使い方】border-radiusは実際にこう使う
上の画像の通り、丸くする度合いを好きに指定できます。
基本的にはpx（ピクセル）で指定しますが、他の単位でも指定できます。
パーセント（％）での指定
％で指定すると、全体の何％の所からカーブを入れるかが指定できる。正方形なら円になるし、長方形なら、☟このようになる。
【特徴】border-radiusの持つ特徴
●特性上、ブロック要素や、インラインブロック要素にしか使えない。
【注意】border-radiusを使う時に起こりやすいミスの事例
●サイズの単位を入力し忘れがちなので注意。
border-radiusに似た効果を持つCSS
※随時更新します。