jqueryで角丸を行う方法

html5とcss3にプラウザが対応し始めてきて、css3のwebkit-radiusを使えば、角丸が簡単にできるようになりました。

でもまだまだ、IE8～6を使われているユーザーは多いですよね。
角丸にならないのユーザー角丸にしたいときに使えるのが、
Jquery Corner→データ v2.11

使い方

上記のリンクからデータをダウンロードしてきます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5.1");</script>
<script type="text/javascript" src="jq_corner_2_11.js"></script>
<script type="text/javascript">
$(function(){
$("#maru1").corner("10px");
});
</script>

.corner()で角丸の半径を入れることで、角丸の形をしていできます。

部分的に角丸

$("#maru1").corner("10pxtop");

上だけ角丸になります。

他にも
下2つ→bottom

$("#maru1").corner("10pxbottom");

左2つ→left

$("#maru1").corner("10pxleft");

右2つ→right

$("#maru1").corner("10pxright");

左上だけ→tl

$("#maru1").corner("10pxtl");

右上だけ→tr

$("#maru1").corner("10pxtr");

左下だけ→bl

$("#maru1").corner("10pxbl");

右下だけ→br

$("#maru1").corner("10pxbr");

で角丸するところを選ぶことができます。