CSSを使って角丸と円を作ってみました。
その昔border-radiusが無かった時代は角丸を作るために、上下左右に角丸の画像を作って表示してました。
角丸と円のCSS記述
※サイズ・色等は必要に応じて書き換えてください。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; font-size: 16px; } h1{ font-size:18px; line-height:1.6em; text-align:center; font-weight:normal; padding:10px 0; } .maru1{ width: 80px; height: 80px; margin: 0 auto; border: solid 1px #777777; border-radius: 40px; background-color: #777777; text-align: center; line-height: 80px; color: #ffffff; } .kadomaru1 { width: 80px; height: 80px; margin: 0 auto; border: solid 1px #333333; border-radius: 10px; background-color: #333333; text-align: center; line-height: 80px; color: #ffffff; } </style>
角丸と円のHTML記述例
<div class="kadomaru1">角丸</div> <br> <br> <div class="maru1">円</div>
IE6を知ってる僕はborder-radiusってかなり便利だなって今だに思ってしまいます。
※流用される場合は自己責任でお願いします。