WordPressでCSSを使って囲み枠を角丸にする方法

画像を角丸にする際に使用するCSS「border-radius」。

実は画像以外のhtmlタグにも使えます。

WordPressでよく使う囲み枠でいろいろな角丸を作って見ました。
[adsense]

border-radiusを使ったいろいろな囲み枠

微妙に変形した囲み枠

htmlタグに直接記述する場合

<div style="border:4px solid #666666;padding:40px;margin:10px;border-radius:340px 30px 150px 30px / 30px 250px 30px 200px;">４つ角がそれぞれ微妙に異なった丸型の囲み枠です。</div>

CSSとして記述する場合

HTMLコード
<div class="kakomiwaku1">４つ角がそれぞれ微妙に異なった丸型の囲み枠です。</div>

CSSコード
.kakomiwaku1{
border:4px solid #666666;
padding:40px;
margin:10px;
border-radius:340px 30px 150px 30px / 30px 250px 30px 200px;
}

丸みのある角丸と角い角丸の囲み枠

htmlタグに直接記述する場合

<div style="border:2px solid #666666;padding:40px;margin:10px;border-radius:30px 5px 30px 5px / 30px 5px 30px 5px;">左上と右下を丸みのある角丸、右上と左下を角のある角丸にしてみました。</div>

CSSとして記述する場合

HTMLコード
<div class="kakomiwaku2">左上と右下を丸みのある角丸、右上と左下を角のある角丸にしてみました。</div>

CSSコード
.kakomiwaku2{
border:2px solid #666666;
padding:40px;
margin:10px;
border-radius:30px 5px 30px 5px / 30px 5px 30px 5px;
}

円形と角の囲み枠

htmlタグに直接記述する場合

<div style="border:2px solid #666666;padding:70px;margin:10px;border-radius:0 50% 0 50%/0 100% 0 100%;">右上と左下を円形、左上と右下を直角にした囲み枠です。</div>

CSSとして記述する場合

HTMLコード
<div class="kakomiwaku3">右上と左下を円形、左上と右下を直角にした囲み枠です。</div>

CSSコード
.kakomiwaku3{
border:2px solid #666666;
padding:70px;
margin:10px;
border-radius:0 50% 0 50%/0 100% 0 100%;
}

ジャガイモのような囲み枠

htmlタグに直接記述する場合

<div style="border:2px solid #666666;padding:20%;margin:10px;border-radius: 70% 30% 40% 60%/50% 50% 70% 60%;">変形した円、ジャガイモみたいな枠線。</div>

CSSとして記述する場合

HTMLコード
<div class="kakomiwaku4">変形した円、ジャガイモみたいな枠線。</div>

CSSコード
.kakomiwaku4{
border:2px solid #666666;
padding:20%;
margin:10px;
border-radius: 70% 30% 40% 60%/50% 50% 70% 60%;
}