Esquinas redondeadas, sombras y bordes transparentes

Son las cajas de BareaStreet: las esqunas superiores se redondean (las inferiores permanecen cuadraditas) y los bordes aparecen sombreados.
Se consigue con CSS (con imágenes) y un script.
Podéis ver el ejemplo en este blog de pruebas: además, la entrada con el anuncio de Milkbox, está encerrada en una de estas cajas. Picando en los ejemplos de botones (en negro) iréis a la página del autor del hack y opdréis ver sus ejemplos (a mí me falta ancho de "main-content"... y ganas para deformar la plantilla aumentándolo).

A ver cómo se hace:

.- CSS:
El autor remite directamente al "copy-paste en esta Demo. El CSS y el script son libres, pero el autor ruega encarecidamente que usemos nuestros propios diseños.

.- SCRIPT:

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

.- HTML de los ejemplos del autor:

<div class="cbb">



<h1>Transparent custom corners and borders, version 2</h1>

<p>This page demonstrates different uses of the technique described in the article <a href="http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/">Transparent custom corners and borders, version 2</a>. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks!</p>

<p>To create your own corners and borders, follow the instructions in <a href="http://www.456bereastreet.com/archive/200506/customising_custom_corners_and_borders/">Customising custom corners and borders</a>. For an example of how easy doing stuff like this will be once all browser vendors get with the times and update their CSS support, check out <a href="http://www.456bereastreet.com/archive/200509/custom_borders_with_advanced_css/">Custom borders with advanced CSS</a>.</p>

<p>The CSS and JavaScript are free to use, but please create your own graphics. Thanks!</p>



</div>

<div class="cbb">

<h2>A default box, nothing special</h2>

<p>This is the most basic type of custom box. It uses the default styling and is not positioned or floated, and does not contain other custom boxes.</p>

</div>



<ul class="cbb">

<li>You can also turn a list into a custom box. This is an unordered list.</li>



<li>List item number two.</li>

<li>List item number three.</li>

</ul>



<div class="cbb">

<h2>This box contains another box</h2>

<div class="cbb">

<h3>This box is contained by another box.</h3>



<p>There used to be a problem with this.</p>

</div>

<p>But now you can put custom boxes inside other custom boxes with no problems.</p>

</div>

<div id="absolute-wrapper"><!-- Only used to create a new positioning context for the absolutely positioned box -->

<div id="box-id" class="cbb one">

<h2>This is an absolutely positioned box</h2>



<p>It will shrinkwrap to fit its content in all browsers but IE.</p>

</div>

</div>



<p>You can also use this technique to turn links into buttons. These are floated left and shrinkwrap to fit their content:</p>

<div class="clearfix">

<a href="http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/" class="cbb button">A button</a>

<a href="http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/" class="cbb button">A button with more text</a>



</div>

<p>Unfortunately you need to specify a width for Internet Explorer since it doesn't shrinkwrap.</p>



<div class="cbb two">

<h2>This box is floated</h2>

<p>It is also styled the same way all boxes will be styled in IE 6 and below. IE 7 supports PNG images with alpha transparency and will display the same images as other browsers.</p>

</div>



<div class="cbb" id="three">



<h2>This box is floated and contains another box that is also floated</h2>

<div class="cbb">

<h3>This box is floated and is contained by another floated box</h3>

<p>As you can see, floats can now contain floats.</p>

</div>

<p>The CSS used to float this box is applied with an <code>id</code> selector to show that if an <code>id</code> attribute exists, the script moves it to the new container.</p>



</div>

En resumidas cuentas: se empieza con una clase "cbb" y se cierra en donde queremos el final de la caja. Fácil :D