要素を角丸にする場合
CSS3でのBOXを角丸にする方法のメモ。CSSのborder-radiusをつかって角丸を実装します。
CSS
|
1 2 3 4 5 |
div{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } |
divが角丸になります。
四つ角の一部分だけ角丸にしたい場合
例えば要素の右上と左上だけとか、左下と右下だけを角丸にしたい時があると思います。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div{ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; } |
top-leftは左上top-rightは右上bottom-leftは左下bottom-rightは右下になります。
角丸ではなく円にしたい場合
CSS
|
1 2 3 4 5 |
div{ -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } |
border-radiusを50%にすることで、ボックスの直線がなくなり楕円、または正円になります。