ボックスの角を丸めることができる。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div { width: 100px; height: 100px; padding: 10px; margin: 30px; background-color: orange; border: 2px solid red; color: red; } </style> |
|
1 2 3 4 |
<style> #test1 { border-radius: 10px; } </style> <div id="test1">test1</div> |
|
1 2 3 4 |
<style> #test2 { border-radius: 10px 20px 30px 40px; } </style> <div id="test2">test2</div> |
|
1 2 3 4 |
<style> #test3 { border-top-right-radius: 50px; } </style> <div id="test3">test3</div> |
|
1 2 3 4 |
<style> #test4 { border-radius: 50%; } </style> <div id="test4">test4</div> |
|
1 2 3 4 5 6 7 |
<style> #test5 { border-radius: 50%; background-image: url("sample.jpg"); } </style> <div id="test5">test5</div> |
参考サイト
border-radius－CSS3リファレンス
http://www.htmq.com/css3/border-radius.shtml