【CSS】ボタンや画像の角を丸くする方法(#border-radius)

【CSS】ボタンや画像の角を丸くする方法(#border-radius) Webデザイン&CSS

こんにちは、ぼんやまです。今回はボタンや画像などの角を丸くするCSSの設定方法を解説します。

どのくらいの丸さにするかも簡単に調整することができ、WordPressテーマで設定したデザインのボタンをちょこっと変更してオリジナリティを出すのにも便利です。

角を丸くする方法

ボタンや画像の角を丸くするには、「border-radius」とういう要素の角丸を定義するプロパティを設定して実現します。

<!-- サンプルhtml -->
<a class="sample_button" href="hogehoge">SAMPLE</a>
/* CSSの記述 */
.sample_button {
    border-radius: 10px;
}

10pxのみ記述することで、左上、右上、左下、右下の丸さが全て10px一括で指定しています。以下が指定した場合のサンプルです。指定する数字は「半径○○pxの円に相当する丸さ」の値となっています。

6pxを指定した場合
ぼんやま
ぼんやま

数字を大きくするともっと丸くすることができるよ!

それぞれの角を別々の丸さにする方法

別々に丸さを指定する場合は、以下のように記述します。

/* CSSの記述 */
.sample_button {
    border-radius: 10px 0px 10px 0px;
}
10px 0px 10px 0pxを指定した場合

通常のボタンの形とだいぶ変えることができます。一箇所のみ0pxにすることで吹き出し風のボタンにすることもできます。

/* CSSの記述 */
.sample_button {
    border-radius: 0px 20px 20px 20px;
}
0px 20px 20px 20pxを指定した場合
ぼんやま
ぼんやま

WordPressの場合も追加CSSでカスタマイズすることができるので是非使ってみてね!

タイトルとURLをコピーしました