CSSだけ使用して画像やヘッダーなどの領域の角を丸める方法を紹介します。
丸める方法
丸める方法といってもとても簡単です。
border-radius: 20px;
これをCSSファイルなどに記述すればOKです。
上記の記述で、半径20ピクセルで角が丸くなります。
※ブラウザの種類や、最新版じゃなかったりすると、適応されない場合もあります。
記述例
上記画像がCSSファイルに記述前の、グローバルナビです。
CSSファイルに記述
今回はワードプレスで作ったサイトで説明します。
ワードプレスの「外観」→「テーマの編集」からスタイルシートのグローバルナビ部分に
border-radius: 20px;
を追加記載します。
記述後のグローバルナビ
このような感じで角が丸まります。
最後に
とても簡単なので、いろいろなところを丸めてみては！！