目的
- HTMLファイルの要素の角を丸めて表示させる方法をまとめる。
押さえるポイント
- 角を丸めて表示させるにはborder-radiusプロパティを使用する。
- 角の丸め具合はピクセル数で指定する。
- 丸め具合のピクセル数は値を大きくすれば大きく丸まり、小さくすれば微量に丸まる。
※ピクセル数は要素の四隅に円を設置したときの円の半径を指す。
※丸め具合を指定するピクセル数は完全に理解する必要ななく、実際に使用して感覚をつかもう！！
書き方の例
- 下記にCSSファイルの内容を記載する。
要素の名前かクラス名 {
border-radius: ピクセル数;
}
より具体的な例
- h1要素の横幅を300px、高さを200px、背景色をred、要素の角を丸くして値を20pxとする。
- 下記にHTMLファイルの内容を記載する。
<h1>おはようございます。</h1>
- 下記にCSSファイルの内容を記載する。
h1 {
width: 300px;
height: 200px;
background-color: red;
/* 要素の角を丸くする設定を記載する */
border-radius: 20px;
}