基本
border-radius: 10px 12px 13px 14px; ( 左上 右上 右下 左下 ) 角を丸くしたい場所を px 又は % で指定します。
全角丸
全角丸
1 |
<div class="demo kadomaru">全角丸</div> |
1 2 3 4 5 6 7 8 |
.demo { padding: 25px; background-color: #999; color: #FFF; text-align: center; margin-right: auto; margin-left: auto; } |
1 2 3 |
.kadomaru { border-radius: 10px; } |
左上角丸
左上角丸
1 2 3 |
.kadomaru2 { border-radius: 10px 0 0 0; } |
右上角丸
右上角丸
1 2 3 |
.kadomaru3 { border-radius: 0 10px 0 0; } |
右下角丸
右下角丸
1 2 3 |
.kadomaru4 { border-radius: 0 0 10px 0; } |
左下角丸
左下角丸
1 2 3 |
.kadomaru5 { border-radius: 0 0 0 10px; } |
右全丸
右全丸
1 2 3 |
.kadomaru6 { border-radius: 0 100px 100px 0; } |
左右全丸
左右全丸
1 2 3 |
.kadomaru7 { border-radius: 100px; } |
border-radius: 50% / 100%; ( 水平 / 垂直 )
水平 / 垂直
1 2 3 |
.kadomaru8 { border-radius: 50% / 100%; } |
角全100%
角全100%
1 2 3 |
.kadomaru9 { border-radius: 100%; } |
丸
丸
1 2 3 4 |
.kadomaru10 { border-radius: 100%; width: 25px; } |
画像の角を丸くする
ベースの画像は、640×360の長方形を使います。
スタンダードな角丸画像
1 2 3 |
<div class="kado"> <img src="wp_logox.jpg" width="640" height="360" alt="" /> </div> |
1 |
.kado img {border-radius: 20px;} |
楕円
1 2 3 |
<div class="kado2"> <img src="wp_logox.jpg" width="640" height="360" alt="" /> </div> |
1 |
.kado2 img {border-radius: 50%;} |
ベースの画像が正方形だったら↑のborder-radius: 50%で本来綺麗な円を作れますが、画像が長方形なので楕円になりました。
長方形の画像でも背景にすることで円にすることができます。
1 |
<div class="kado3" style="background: url(wp_logox.jpg) center center no-repeat;"></div> |
1 2 3 4 5 6 7 |
.kado3 { position: relative; display: inline-block; border-radius: 50%; width: 300px; height: 300px; } |
コメントを残す