Corner adorner in designing web has come to importance thing cause it will make your web looks better. For implementation of this, you can use rounded corner image as background or you can use javascript as I will explain below.

First of all, get a copy of JQuery and then jquery.corner.js. You can also find more explanation here and here.

The corner function takes one string argument: $().corner(“effect corners width“)

Effect: round, bevel, notch, bite, cool, sharp, slide, jut, curl, tear, fray, wicked, sculpt, long, dog ear, dog2, dog3.
Corners: top, bottom, tl (top left), tr?(top right), bl (bottom left) , br (bottom right)
Width : Include a px value to specify the corner size e.g. 10px, 15px etc.

Here is a simple example:

<style type=”text/css”>
code {
?font: 90% Courier New,monospace;
?color: #33a;
?font-weight: bold;
}

.adorned {
?background: #1AF;
?width: 23em;
?text-align: center;
?padding: 20px 2px;?/* padding greater than corner height|width */
?margin: 1em 0.25em;
?color:#000;
}
.adorned h1 {
?font-size: 120%;
}

</style>

<script type=”text/javascript” src=”jquery.js” mce_src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.corner.js” mce_src=”jquery.corner.js”></script>
<script type=”text/javascript”>
? // The code tags have the actual code, which is applied to the div
? $(document).ready(function(){
??? $(“.adorned”).each(function(){
??eval($(“code”, this).text());
?});
? });
</script>

<div>
?<div class=”adorned”> <h1>Rounded Corners</h1>?<code>$(this).corner(“round tl 10px”);</code> </div>
?<div class=”adorned”> <h1>Beveled Corners</h1>?<code>$(this).corner(“bevel”);</code> </div>
?<div class=”adorned”> <h1>Notched Corners</h1>?<code>$(this).corner(“notch”);</code> </div>
?<div class=”adorned”> <h1>Dog-ear Corners</h1>?<code>$(this).corner(“dog”);</code> </div>
?<div class=”adorned”> <h1>Bite Corners</h1>?<code>$(this).corner(“bite”);</code> </div>
?<div class=”adorned”> <h1>Sharp Corners</h1>?<code>$(this).corner(“sharp”);</code> </div>
?<div class=”adorned”> <h1>Sculpt Corners</h1>?<code>$(this).corner(“sculpt”);</code> </div>