Eine Box mit abgerundeten Ecken bauen

Quelle: webcredible

.bl {background: url(bl.png) bottom left no-repeat}
.br {background: url(br.png) bottom right no-repeat}
.tl {background: url(tl.png) top left no-repeat}
.tr {background: url(tr.png) top right no-repeat; padding:10px}
.t {background: url(t.png) top repeat-x; width: 100%}
.b {background: url(b.png) bottom repeat-x}
.l {background: url(l.png) left repeat-y}
.r {background: url(r.png) right repeat-y}

.bl_shaded {background: url(bl_shaded.png) bottom left no-repeat}
.br_shaded {background: url(br_shaded.png) bottom right no-repeat}
.tr_shaded {background: url(tr_shaded.png) top right no-repeat}
.b_shaded {background: url(b_shaded.png) bottom repeat-x}
.r_shaded {background: url(r_shaded.png) right repeat-y}

box.html

<div class="t">
  <div class="b">
    <div class="l">
      <div class="r">
        <div class="bl">
          <div class="br">
            <div class="tl">
              <div class="tr">
                  <div id="block_inner"> <!-- für Abstand zum Rahmen -->
                    INHALT
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="t">
  <div class="b_shaded">
    <div class="l">
      <div class="r_shaded">
        <div class="bl_shaded">
          <div class="br_shaded">
            <div class="tl">
              <div class="tr_shaded">
                  <div id="block_inner"> <!-- für Abstand zum Rahmen -->
                    INHALT
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Sollte mal zB nur der linke und untere Rand gebraucht werden (wenn man eine Box oben rechts ins Eck stellen will, reicht zB auch dieser Code:

<div class="b_shaded">
  <div class="l">
    <div class="bl_shaded">
      <div id="sb_inner">
        Suche
      </div>
    </div>
  </div>
</div>

Zur Erklärung:
In diesem Fall soll die Suchbox sich ganz oben und ganz rechts befinden und beim äußeren Rahmen andocken. Daher ist kein Rahmen oben und rechts nötig. Daher können dann die divs mit den Klassen t, tl, tr, r und br entfallen. Für eine Box ohne Schatten einfach die _shaded Angabe weglassen.

• Die Boxen sind von der Größe KOMPLETT VARIABEL

• Code wird recht umfangreich und unübersichtlich - vor allem, wenn man solche Boxen öfter einsetzen will.