jquery.corner.js試してみた。

jQueryでさまざまな角丸っぽい効果を実現するプラグイン『jQuery Corner』 | IDEA*IDEA
試してみた。

<style >
.adorned {
	background: #FFF;
	width: 30em;
	text-align: left;
	padding: 16px 16px;	
	margin: 1em auto;
	color:#000;
	border:1px #999999 solid;
}
.testcorner{
	background: #FFCCCC;
	width: 30em;
	text-align: left;
	padding: 16px 16px;	
	margin: 1em auto;
	color:#000;
	border:1px #663300 solid;	
}
.think{
	background: #009933;
	width: 30em;
	text-align: left;
	padding: 16px 16px;	
	margin: 1em auto;
	color:#000;
	border:1px #555 solid;
}
.note{
	background: #AAA;
	width: 20em;
	text-align: left;
	padding: 16px 20px;	
	margin: 1em auto;
	color:#000;
	border:1px #555 solid;
}
</style>
<script type="text/javascript" src="../base/jquery.js"></script>
<script type="text/javascript" src="../base/jquery.corner.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
	$(".adorned").corner("round 10px"); 
	$(".testcorner").corner("bite 10px");
	$(".think").corner("bevel 2px").corner("dog 16px tr");
	$(".note").corner("notch 10px cc:#003300");
  });
</script>

こう書くと、

こうなった。