jquery.corner:指定エリアを角丸にするJs



角丸は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にも角丸指定があったかと思いますが、
古いバージョンのブラウザがいつもネックになるんですよね。
特にアレが…