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で出来るよね。