【CSS講座】STEP12: 角を丸くする

ではCSSを使って、角を丸くする方法を紹介します。

こちらの例文を見てください。

今回は上の例の、「こちらをクリック」についている輪郭の角を丸くしましょう。

角を丸くする方法

1. 上の文字にある「こちらをクリック」の上でメニュー「検証」を選択します。

2. 出てきたウィンドウにあるCSSの「border-radius」で角を丸くします。

   
   .ex button {
   background: ■#fff5ad;
   font-family: "ＭＳ ゴシック",sans-serif;
   color: ■#ff7d20;
   font-weight: bold;
   line-height: 1;
   padding: 1em;
   border: solid 5px ■#ff7d20;
   border-radius: 0;
   }
   

   「border-radius」のところの「0」「10px」にしてみてください。

   角が丸くなりましたか?　数値を大きくすると、角の丸も大きくなります。

ここで覚えるCSS

 

← 前のページ

CSSの基本はこちらです

CSSの基本についてはこちらの記事にまとめています。