Witam,
jak zrobić takie coś jak na obrazku?



ma to działać na zasadzie takiej: szerokość stała, a wysokość powiększa się pod rozmiarem tekstu i żeby te obramowanie przerywane dashed było na całej wysokości

display: table-cell, ew. faux columns

Tak to wygląda:

[HTML] pobierz, plaintext 
<div id="auto">
<div id="aul">
<h2 style="color:#bad852;">TESTY:</h2><br>
fdgdfdgdfdgdfdgdfdgdfdgdfdgd <br><br>
 fdgdfdgdfdgdfdgdfdgd <br><br>
 fdgdfdgdfdgdfdgdfdgdfdgd
<br><br>
fdgdfdgdfdgdfdgdfdgdfdgdfdgd<br><br>
<h2 style="color:#bad852;">TEST1:</h2><br>
fdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgd
</div>
<div id="au"><h2 style="color:#bad852;">TESTY2</h2><br>
fdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgd<br><br>
<h2 style="color:#bad852;">OOOOO:</h2><br>fdgdfdgdfdgdfdgdfdgdfdgdfdgd
</div>
<div id="aur">
fdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgdfdgd
<br>
<center><div id="logs"></div></center><br> 
fdgdfdgdfdgdfdgd
</div>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#auto
{
width: auto;
overflow:auto;
border: 1px;
background-color:#272727;
-moz-border-radius:5px; /* FF */
-webkit-border-radius:5px; /* przeglądarki z webkitem (Safari, Chrome itp.) */
-khtml-border-radius:5px; /* przeglądarki typu K-meleon (typowo Linuxowe) */
border-radius:5px; /* pozostałe przeglądarki */
behaviour:url(border-radius.htc); /* dodatek dla badzIEwnej przeglądarki */
padding: 10px 10px 10px 10px;
}
#aul{
width:25%;
height: auto;
border-right-style: dashed;
border-color: #bad508;
float: left;
 
}
#aule a{
color : #bad852;
text-transform : uppercase;
font-weight : bold;
padding-left: 5px;
}
#aur{
width:25%;
padding-left:5px;
border-left-style: dashed;
border-color: #bad508;
float: right;
}
#au{
width:48%;
overflow:auto;
border: 1px;
 
float:left;
margin-left:8px;
}
#sblewa
{
width:50%;
color: #fff;
float:left;
padding-bottom:10px;
}
#sbprawa
{
width:50%;
color: #fff;
float:left;
padding-bottom:10px;
}
#logs{
background : url(/images/logs.jpg) no-repeat;
width:167px;
height:98px;
}
[HTML] pobierz, plaintext 

Jak to przerobić, żeby uzyskać efekt taki jak na zdjęciu ?

Za pomocą css'a osiągniesz efekt tylko na firefox'ie niestety. Na IE i (chyba) Operze nie będą widoczne okrągłe rogi.
Dlatego osobiście nie polecam robić tego w css tylko standardowo graficznie:)

Rogi osiągniesz na każdej popularnej (Chrome, Opera, FF, Safari - być może, działa na webkit) przeglądarce poza IE. Na IE są skrypty które również potrafią to symulować. Kodowanie tego graficznie jest później trudniejsze w edycji.

Okej zrobiłem to w ten sposób:
4 rogi i tło - obrazki (sklepiłem to w całość)

Jak teraz to podzielić na 3 części i oddzielić przerywaną linią (przerywaną)?

Już napisał Ci erix:
faux columns < - google.pl