![ウィジェットの角を丸くするアイキャッチ](https://i0.wp.com/life-in-japan-thoa.com/wp-content/uploads/2020/05/ウィジェットの角を丸くするアイキャッチ.png?fit=198%2C168&ssl=1)
「Diver」のテーマを使っていて、ウィジェットの角を丸くしたいと思ったことはありませんか? ウィジェットの角を丸くするCSSをご紹介します。サイト作成に役立ててくださいね。
![](https://i0.wp.com/life-in-japan-thoa.com/wp-content/uploads/2019/04/IMG_1399.jpg?w=850&ssl=1)
Thoa
オリジナルのサイトを作るにはCSSが必要になってきますね。
下の画像を見て頂くと、ウィジェットの角が四角いですよね。
角が四角いと、どこか固い印象があります。
![ウィジェットの角が四角](https://life-in-japan-thoa.com/wp-content/uploads/2020/05/ウィジェットの角が四角.png)
ウィジェットの角を丸くするためのCSSが以下になります。
ウィジェットの角を丸くするCSS
.widget {
border-radius: 10px;
overflow: hidden;
}
border-radius: 10px;
overflow: hidden;
}
このCSSを追加CSSに入れることで、ウィジェットの角が下の画像のように丸くなりますよ。
![ウィジェットの角が丸い](https://life-in-japan-thoa.com/wp-content/uploads/2020/05/ウィジェットの角が丸い.png)
ウィジェットの角が丸くなることで、どこか柔らかい印象があるので、視聴者の方にも良い印象を持ってもらえるかも知れませんね。
今回はウィジェットの角を丸くする方法についてご紹介いたしました。