【CSS】border-radiusとは?~要素の角を丸くする方法~ | MUKKUN QUEST
MUKKUN QUEST     

【CSS】border-radiusとは?~要素の角を丸くする方法~

HTML&CSS

【CSS】border-radiusの解説です。読み方は「ボーダーレイディウス」
要素の角を丸くする方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】border-radius ~要素の角を丸くする方法~

具体的に解説していきます。

【実例】border-radiusはこう打てば、こうなる


☝このように打つことで
☟このように横幅を指定できます。

【使い方】border-radiusは実際にこう使う

上の画像の通り、丸くする度合いを好きに指定できます。
基本的にはpx(ピクセル)で指定しますが、他の単位でも指定できます。

パーセント(%)での指定

%で指定すると、全体の何%の所からカーブを入れるかが指定できる。正方形なら円になるし、長方形なら、☟このようになる。

【特徴】border-radiusの持つ特徴

●特性上、ブロック要素や、インラインブロック要素にしか使えない。

【注意】border-radiusを使う時に起こりやすいミスの事例

●サイズの単位を入力し忘れがちなので注意。

border-radiusに似た効果を持つCSS

※随時更新します。