Todos los bordes y esquinas del mundo (con Query)

Tal que así: en mi via había visto cajas tan variadas: bordes redondeados, asimétricos, con esquinas dobladas hacia dentro... de todo.

Y todas, todas, se consiguen con un script query. Podéis ver cómo queda en Blogger, en este Blog de pruebas. Podéis ver la demo original y copiar el script corner.js, AQUÍ

Así se hace:

.- CSS:

div.demo {
float: left; width: 18em; padding: 20px; margin: 1em;
background: #c92; color:#000; text-align: center; font: verdana, arial, sans-serif;)

.- SCRIPTS:

<script src='http://.../jquery.js' type='text/javascript'/>

<script src='http://.../jquery.corner.js' type='text/javascript'/>

<script type='text/javascript'>

$(function(){ // shorthand for $(document).ready() BTW

$(&#39;div.demo&#39;).each(function() {

// The text of the paragraphs in the rounded divs is also the

// jQuery code needed to create that effect. Cosmic.

eval($(&#39;p&#39;, this).text());

});

$(&#39;#main p&#39;).wrap(&quot;<code/>&quot;);

});

</script>

.- HTML: Este es el de todas las cajas que véis-

<div class="demo"><h1>Round</h1> <p>$(this).corner();</p></div>

<div class="demo"><h1>Bevel</h1> <p>$(this).corner("bevel");</p></div>

<div class="demo"><h1>Notch</h1> <p>$(this).corner("notch");</p></div>



<div class="demo"><h1>Bite</h1> <p>$(this).corner("bite");</p></div>

<div class="demo"><h1>Cool</h1> <p>$(this).corner("cool");</p></div>

<div class="demo"><h1>Sharp</h1> <p>$(this).corner("sharp");</p></div>

<div class="demo"><h1>Slide</h1> <p>$(this).corner("slide");</p></div>



<div class="demo"><h1>Jut</h1> <p>$(this).corner("jut");</p></div>

<div class="demo"><h1>Curl</h1> <p>$(this).corner("curl");</p></div>

<div class="demo"><h1>Tear</h1> <p>$(this).corner("tear");</p></div>

<div class="demo"><h1>Fray</h1> <p>$(this).corner("fray");</p></div>



<div class="demo"><h1>Wicked</h1><p>$(this).corner("wicked");</p></div>

<div class="demo"><h1>Sculpt</h1><p>$(this).corner("sculpt");</p></div>

<div class="demo"><h1>Long</h1> <p>$(this).corner("long");</p></div>

<div class="demo"><h1>Dog Ear</h1><p>$(this).corner("dog");</p></div>



<div class="demo"><h1>Dog2</h1><p>$(this).corner("dog2");</p></div>

<div class="demo"><h1>Dog3</h1><p>$(this).corner("dog3");</p></div>
<div class="demo"><h1>Top Bevel</h1> <p>$(this).corner("bevel top");</p></div>

<div class="demo"><h1>Top-Left Bite</h1> <p>$(this).corner("bite tl");</p></div>

<div class="demo"><h1>Round Bottom</h1> <p>$(this).corner("bottom");</p></div>



<div class="demo"><h1>Bottom-Left Notch</h1><p>$(this).corner("notch bl");</p></div>

<div class="demo"><h1>Top-Right Dog Ear</h1><p>$(this).corner("dog tr");</p></div>

<div class="demo"><h1>Top-Left, Bottom-Right Cool</h1><p>$(this).corner("cool tl br");</p></div>
<div class="demo"><h1>Round 30px</h1> <p>$(this).corner("30px");</p></div>

<div class="demo"><h1>Round 5px</h1> <p>$(this).corner("5px");</p></div>

<div class="demo"><h1>Cool 20px</h1> <p>$(this).corner("cool 20px");</p></div>



<div class="demo"><h1>Sharp 20px</h1> <p>$(this).corner("sharp 20px");</p></div>

<div class="demo"><h1>Bite 30px</h1> <p>$(this).corner("bite 30px");</p></div>

<div class="demo"><h1>Wicked 20px</h1><p>$(this).corner("wicked 20px");</p></div>

<div class="demo"><h1>Dog 20px</h1><p>$(this).corner("dog 20px");</p></div>



<div class="demo"><h1>Dog2 30px</h1><p>$(this).corner("dog2 30px");</p></div>

<div class="demo"><h1>Dog3 30px</h1><p>$(this).corner("dog3 30px");</p></div>
<div class="demo"><h1>Round and Bevel</h1><p>$(this).corner( "bottom").corner("top bevel");</p></div>

<div class="demo"><h1>Round and Notch</h1><p>$(this).corner( "br top").corner("notch bl 20px");</p></div>

<div class="demo"><h1>Crazy</h1> <p>$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");</p></div>