Bordes redondeados y esquinas transparentes

Css con alguna imagen y javascript.
La lástima es que se me queda estrecho el "content"·, pero... no voy a desgraciar la plantilla por ensancharlo.

Transparent custom corners and borders, version 2

This page demonstrates different uses of the technique described in the article Transparent custom corners and borders, version 2. 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!

To create your own corners and borders, follow the instructions in Customising custom corners and borders. 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 Custom borders with advanced CSS.

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

A default box, nothing special

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.

• You can also turn a list into a custom box. This is an unordered list.



• List item number two.


• List item number three.

This box contains another box

This box is contained by another box.

There used to be a problem with this.

But now you can put custom boxes inside other custom boxes with no problems.

This is an absolutely positioned box

It will shrinkwrap to fit its content in all browsers but IE.

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

A button
A button with more text

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

This box is floated

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.

This box is floated and contains another box that is also floated

This box is floated and is contained by another floated box

As you can see, floats can now contain floats.

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

A la vista está que la sombra se aplica a todos los bordes (superiores e inferiores), pero el "redondeo" de la esquina es sólo superior. Pero queda guapo...

---