ログイン
問題6

【border-radius】角を丸めよう

CSSでは、要素の角を丸めたいときに「border-radius」プロパティを使用します。radiusとは日本語で半径を意味し、その意味の通り、border-radiusは半径値を調整します。実践で挙動を確認してみましょう。

アイコン画像

本のアイコンborder-radiusとは

border-radiusプロパティとは、CSSのプロパティのひとつで、要素の角を丸くすることができます。
border-radiusを指定することによって、角の部分が円形になり、より丸みのあるデザインを表現できます。

border-radiusを指定する際は、
左上(top-left)、右上(top-right)、右下(bottom-right)、左下(bottom-left)の順番で値を記述します。

各値は、単位(pxや%)を指定して使用します。

また、値を2つだけ指定すると、左上と右上、左下と右下の角の丸みを同じにすることができます。
値を1つだけ指定した場合は、すべての角の丸みが同じ値になります。

本のアイコンborder-radiusジェネレーター

border-radiusを使用することで色々のかたちをした要素を作成することができます。
テキストエディタやディベロッパーツールを使って見え方を都度値を変えて変更を確認するのは非常に手間がかかってしまいます。
そのような際に便利なのがborder-radiusのジェネレーターツールです。
フリーで使えるツールがいくつか用意されているので、是非使用してみましょう。

CSSの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。

問題6:【border-radius】角を丸めよう

用意したboxの角を丸めて見本画像にあるレモンのような形に調整してみましょう。

エディターのアイコンあらかじめエディタに書くコード

                <div class="box"></div>
¥HTML¥
              
                .box {
  width: 200px;
  height: 200px;
  background: black;
}
¥CSS¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              .box {
  width: 200px;
  height: 200px;
  background: yellow;
  border-radius: 10px 100px 10px 100px;
}
¥CSS¥
            

コメントのアイコン解説

デザインをしていると角を丸めたい事、よくあります。
頻繁に使用するプロパティなので、必須で覚えておきましょう。

border-radiusを使って角を調整する場合もpxや%を使って指定します。
今回の解答では、borderの問題で学習したショートハンドを使用しています。
border-radiusをショートハンドで書く場合は左上、右上、右下、左下の順番で記述します。
ログインして解答を見る

コメントのアイコン補足

円形を表現する場合も、border-radiusで実現可能です。
その場合は、4方向全てに50%を指定します。
全ての方向が同じ値の場合は、省略してborder-radius: 50%;と書くことができます。
このプロパティは半径を調整するプロパティなので、50%以上の値を指定した場合は、50%を指定したときの挙動と同じになります。覚えておきましょう!
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!