要素を角丸にする場合
CSS3でのBOXを角丸にする方法のメモ。CSSのborder-radiusをつかって角丸を実装します。
CSS
div{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
これだけでdivが角丸になります。
四つ角の一部分だけ角丸にしたい場合
例えば要素の右上と左上だけとか、左下と右下だけを角丸にしたい時があると思います。
CSS
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
div{
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
border-radiusを50%にすることで、ボックスの直線がなくなり楕円、または正円になります。