ヨスのCSS講座

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

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

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

このボタンをクリックしてください!

 

こちらをクリック

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

角を丸くする方法

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

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

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

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

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

ここで覚えるCSS

border-radius : ここにコードを入れる ;

 

← 前のページ

CSSの基本はこちらです

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