CSSで角丸にするプロパティ border-radiusについて考えていきます。2015年5月25日現在記事
こんな感じのもの。
その名の通り、枠線の半径を指定するものです。 角が丸いと先進的なデザインになりますね。
HTML部
<div id="box"> </div>
CSS部
#box{ width: 600px; height: 100px; border: 1px solid #000; border-radius: 10px; }
丸角の半径は10にするという意味です。borderを適当に設定しておかないと見れないのでborderはつけるようにしましょう。
border-radiusは比較的メジャーになってきているものの、ベンダープレフィックスを付けるべきなのか、つけなくていいのか記事を見ると悩まされます。そんなわけでテスト
コードを書いてみる。
HTML部
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <link rel="stylesheet" type="text/css" href="border_radius.css"> </head> <body> <div class="box border1"><p>border-radius: 10px;</p> </div> <div class="box border2"><p>-o-border-radius: 10px;</p> </div> <div class="box border3"><p>-ms-border-radius: 10px;</p> </div> <div class="box border4"><p>-moz-border-radius: 10px;</p> </div> <div class="box border5"><p>-webkit-border-radius: 10px;</p> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ p{ font-size: 18px; } .box{ margin: 20px auto; width: 400px; height: 100px; border: 1px solid #000000; padding-left: 20px; } .border1{ border-radius: 10px; } .border2{ -o-border-radius: 10px; } .border3{ -ms-border-radius: 10px; } .border4{ -moz-border-radius: 10px; } .border5{ -webkit-border-radius: 10px; }
今はほとんど対応してますね。