CSS : Flexible containing box with rounded corners, step one

contents

The basic elements

This demo is similar to alistapart's custom corners, but makes it possible to use transparent images... and flexibly coloured backgrounds.

What I want to accomplish is a flexible container with rounded corners using CSS and some background images, and it will look something like the following image:

The big problem here is that I want the rounded corners to be transparent so the background shows trough.

Well.. for starters we set up some basic structure, use the source to see how it's done.

This is an item

Here are some paragraphs and some images that are floating around.

Constituebatur autem in eam arietaria machina, quae graece dicitur criodocis, in qua conlocabatur torus perfectus in torno, in quo insuper constitutus aries rudentium ductionibus et reductionibus efficiebat magnos operis effectus. Tegebatur autem is coriis crudis quemadmodum turris.


caption

Maiorem vero turrem altam cubitorum CXX, latam cubitorum XXIII, contracturam item quinta parte, arrectaria pedalia in imo, in summo sedigitalia. Hanc magnitudinem turris faciebat tabulatorum XX, cum haberent singula tabulata circumitionem cubitorum ternum. Tegebat autem coriis crudis, ut ab omni plaga essent tutae. Testudinis arietariae comparatio eadem ratione perficiebatur.

A paragraph containing links and stuff.

next step (spacing)