Zaokrąglanie rogów i łączenie kolorowych "pasków"

Jak ma wyglądać fragment kodu w stylu CSS i na stronie HTML, aby strona wyglądała tak jak na 1 screenie?? (Pliki w załączniku na dole.) Chodzi mi jedynie o wygląd błękitnego sidebar'a po prawej oraz paska w stopce, bo resztę mam.

Obecnie w HTML mam tak:

<div id="sidebar">
	<ul>
		<li>
			<div class="gora_lewy">
			<div class="gora_prawy">
				<img src="dots.gif"><img src="spacer.jpg">
			</div>
			</div>

			<center><img id=glowna src="troj-p.gif"><a href="index.htm" onmouseover="document.getElementById('glowna').src='sub_p1.gif';" onmouseout="document.getElementById('glowna').src='troj-p.gif'">Strona<br />główna</a><br />
			<img id=oferta src=troj-p.gif><a href="oferta.htm" a onmouseover="document.getElementById('oferta').src='sub_p1.gif';" onmouseout="document.getElementById('oferta').src='troj-p.gif'">Oferta</a><br />
			<img id="kontakt" src=troj-p.gif><a href="kontakt.htm" onmouseover="document.getElementById('kontakt').src='sub_p1.gif';" onmouseout="document.getElementById('kontakt').src='troj-p.gif'">Kontakt</a><br /></center>

			<div class="dol_lewy">
			<div class="dol_prawy">
				<img src="spacer.jpg"><img src="dots.gif"><br />
			</div>
			</div>
		</li>
	</ul>
</div>         

I w CSS tak:

#sidebar {
	float: right; 				
	width: 150px;				
	padding: 100px 10px 205px 0px;		
}

.gora_lewy {
background: url(tc1.gif) top left no-repeat;
}

.gora_prawy {
background: url(tc2.gif) top right no-repeat;
}

.dol_lewy {
background: url(tc4.gif) top left no-repeat;
}

.dol_prawy {
background: url(tc3.gif) top right no-repeat;
}

#sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#sidebar li ul {
	margin: 0px 0px 0px 0px;			
}

#sidebar h2 {
	height: 27px;
	margin: 0px;
	padding: 3px 0px 0px 15px;
	background: #FFFFFF;
	font-size: 24px;
	color: #FFFFFF;
}

#sidebar a {
	font-family: Times New Roman;
	text-decoration: underline;
	color: #0000FF;
}



/* Footer */

#footer {
	width: 880px;
	height: 90px;
	margin: 0px auto;
	background: #FFFFFF;
	font-family: Times New Roman;
}

#footer tlo {
	background-image: url(stopka.gif);
	width: 200; 
	height: 26;
	padding: 0px 0px 0px 0px;
}

#footer p {
	margin: 0px;
	padding: 30px 10px 10px 10px;
	text-align: center;
	font-size: 11px;
}

#footer a {
	text-decoration: none;
	color: red;									
}

#footer a:hover {
	text-decoration: none;						
	color: #FFA500;
}

Próbowałem też z <img style="position: relative; left: 10px; bottom: 4px" src="spacer.jpg"> ale to nie pomaga, a na pewno jest prostsze rozwiązanie.
Mam nadzieję, że jest czytelnie.

http://border-radius.com/ + zlanie starych IE?

Nie o to mi chodziło, bo border-radius zaokrągla prosty pasek, a ja chce dopasować ze sobą:

1. końcówkę lewą
2. pasek prosty
3. końcówkę prawą

Końcówki już są gotowe, zaokrąglone. Trzeba je tylko dopasować, aby do siebie przylegały.
Potem ewentualnie można zmienić jeszcze ich kształt, ale głównie chodzi o samo dopasowanie.
W 1 poście są załączniki jak to wygląda.

no to ja Ci właśnie odpowiedziałem co masz zrobić

1. wyrzuć te swoje obrazeczki
2. użyj border-radius