CSSだけ使用して画像の角や、領域を丸める方法　html ワードプレスなどで使えます

CSSだけ使用して画像やヘッダーなどの領域の角を丸める方法を紹介します。

丸める方法

丸める方法といってもとても簡単です。
border-radius: 20px;　
これをCSSファイルなどに記述すればOKです。
上記の記述で、半径20ピクセルで角が丸くなります。
※ブラウザの種類や、最新版じゃなかったりすると、適応されない場合もあります。

記述例

上記画像がCSSファイルに記述前の、グローバルナビです。

CSSファイルに記述

今回はワードプレスで作ったサイトで説明します。
ワードプレスの「外観」→「テーマの編集」からスタイルシートのグローバルナビ部分に
border-radius: 20px;
を追加記載します。　

記述後のグローバルナビ

このような感じで角が丸まります。

最後に

とても簡単なので、いろいろなところを丸めてみては！！