jquery.corner.jsを使って指定エリアを角丸にする方法｜DAD UNION

jquery.corner.jsを使って指定エリアを角丸にする方法をご紹介します。
角丸はCSS（border-radius）で出来ますが、かなり昔はCSSで角丸が出来ず角丸の画像を使ってやってました。
今回はJavaScriptプラグインのjquery.corner.jsを使ってやってみました。

Contents

jquery.corner.jsを使って、指定エリアを角丸にするCSSの記述
jquery.corner.jsを使って、指定エリアを角丸にするJavaScriptの記述
jquery.corner.jsを使って、指定エリアを角丸にするHTMLの記述
jquery.corner：指定エリアを角丸にするデモページ
ソース元：JQuery Corner Demo

jquery.corner.jsを使って、指定エリアを角丸にするCSSの記述

※3パターンのエリア（.clSample1、.clSample2、.clSample3）を用意しました。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
	font-weight:normal;
}
#idWrap{
	width:500px;
	margin:0 auto;
}

.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>

jquery.corner.jsを使って、指定エリアを角丸にするJavaScriptの記述

※jquery.min.js、jquery.corner.jsファイルを読み込みます。3パターンのエリア（.clSample1、.clSample2、.clSample3）に対して角丸を実装してみます。

<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>

jquery.corner.jsを使って、指定エリアを角丸にするHTMLの記述

※class=”clSample1″（四隅を角丸）、class=”clSample2″（上だけ角丸）、class=”clSample2″（四隅角丸を5pxに指定）で用意しました。

<div id="idWrap">
	<h1>指定エリアを角丸にします。<br />
    ここでは3パターン指定してますが色々オプションで指定ができる様です。</h1>

    <div class="clSample1">
    四隅
    </div>
    <div class="clSample2">
    上だけ
    </div>
    <div class="clSample3">
    角丸を5pxに指定
    </div>

</div><!--/idWrap-->