角丸はCSSや画像を使ってやってましたがJsでも出来る様です。
1.CSSの記述例
<style type="text/css"> <!-- .clSample1{ width:18em; padding: 20px; margin: 1em; background: #6af; } .clSample2{ width:18em; padding: 20px; margin: 1em; background: #6af; } .clSample3{ width:18em; padding: 20px; margin: 1em; background: #6af; } --> </style>
2.読込むJsとJavaScriptの記述例
今回は3パターンの設定を実装してみます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.corner.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".clSample1").corner(); $(".clSample2").corner("top"); $(".clSample3").corner("5px"); }); </script>
3.HTMLの記述例
<div class="clSample1"> 四隅 </div> <div class="clSample2"> 上だけ </div> <div class="clSample3"> 角丸を5pxに指定 </div>
jquery.corner:指定エリアを角丸にするデモページ
ソース元:JQuery Corner Demo
色々オプションで角丸をpx指定でき、かつ角丸だけで無い様ですね。
まぁ、CSSで出来るよね。