概要
css3の角丸を指定するborder-radiusについて説明します
プロパティ名
プロパティ名 | 設定内容 |
---|---|
border-radius | 四つ角全ての角丸を設定 |
border-top-left-radius | 左上の角丸を設定 |
border-top-right-radius | 右上の角丸を設定 |
border-bottom-left-radius | 左下の角丸を設定 |
border-bottom-right-radius | 右下の角丸を設定 |
内容
各角の角丸を設定します。
設定値
数値で設定します
注意事項
2012/03/22現在、ベンダープリフィックスをつけないと動作しなません
例
/* webkit系 */ -webkit-border-radius:50px; /* mozilla系 */ -moz-border-radius:50px; /* opera */ -o-border-radius:50px; /* microsoft系 */ -ms-border-radius:50px;
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>background_size</title> <style type="text/css"> p { background-color:gray; width:300px; height:100px; padding:25px; } p#contents1 { border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px; -ms-border-radius:50px; } p#contents2 { border-top-left-radius:50px; -webkit-border-top-left-radius:50px; -moz-border-top-left-radius:50px; -o-border-top-left-radius:50px; -ms-border-top-left-radius:50px; } p#contents3 { border-top-right-radius:50px; -webkit-border-top-right-radius:50px; -moz-border-top-right-radius:50px; -o-border-top-right-radius:50px; -ms-border-top-right-radius:50px; } p#contents4 { border-bottom-left-radius:50px; -webkit-border-bottom-left-radius:50px; -moz-border-bottom-left-radius:50px; -o-border-bottom-left-radius:50px; -ms-border-bottom-left-radius:50px; } p#contents5 { border-bottom-right-radius:50px; -webkit-border-bottom-right-radius:50px; -moz-border-bottom-right-radius:50px; -o-border-bottom-right-radius:50px; -ms-border-bottom-right-radius:50px; } </style> </head> <body> <p id="contents1">四つ角丸</p> <p id="contents2">左上角丸</p> <p id="contents3">右上角丸</p> <p id="contents4">左下角丸</p> <p id="contents5">右下角丸</p> </body> </html>