Howto: runde Ecken mit CSS und Bildern

[Drakes]

Das ist aber nur von der Breite her "flüssig".
Die bessere Variante sieht so aus (mit ein paar Tricks, damits auch in allen Browsern passt):

HTML-Code:

<div class="style1">
   <div class="headLeft">
      <div class="headRight">
         <div class="headMiddle">
            <img src="spacer.gif" class="spacer" alt="" />
         </div>
      </div>
   </div>
   <div class="bodyLeft">
      <div class="bodyRight">
         <div class="bodyMiddle">
            Content
         </div>
      </div>
   </div>
   <div class="baseLeft">
      <div class="baseRight">
         <div class="baseMiddle">
            <img src="spacer.gif" class="spacer" alt="" />
         </div>
      </div>
   </div>
</div>

Css Beispiel:

Code:

.style1 .headLeft {
	background: url('top_left.gif') top left no-repeat;
	padding-left: 9px;
	}
.style1 .headRight {
	background: url('top_right.gif') top right no-repeat;
	padding-right: 9px;
	}
.style1 .headMiddle {
	background: url('top_mid.gif') top repeat-x;
	}
.style1 .headMiddle .spacer {
	height: 23px;
	}
	
.style1 .bodyLeft {
	padding-left: 1px;
	background: url('center_left.gif') top left repeat-y;
	}
.style1 .bodyRight {
	padding-right: 1px;
	background: url('center_right.gif') top right repeat-y;
	}
.style1 .bodyMiddle {
	overflow: auto;
	background: transparent;
	}
	
.style1 .baseLeft {
	background: url('bottom_left.gif') top left no-repeat;
	padding-left: 9px;
	}
.style1 .baseRight {
	background: url('bottom_right.gif') top right no-repeat;
	padding-right: 9px;
	}
.style1 .baseMiddle {
	background: url('bottom_mid.gif') top repeat-x;
	}
.style1 .baseMiddle .spacer {
	height: 19px;
	}

Wobei das <img> eigentlich nicht nötig ist und man könnte die Höhe direkt headMiddle etc. zuweisen, jedoch falls man dann die Box über DOM erzeugt breiten sich die mittlerene Teile im IE nicht mehr aus.

BTW. sieht man das ganze bei meinem neuen Projekt in Aktion.