Runde Ecken für einzelne Listenpunkte

Ich möchte gerne jedem einzelnen Listenpunkt zwei Hintergrundgrafiken (obere runde Ecken + untere runde Ecken) zuweisen, damit jeder einzelne Listenpunkt in einer Box mit runden Ecken angezeigt wird. Kann mir jemand helfen, wie ich das umsetzen kann?

Bisher habe ich lediglich die gesamte Liste mit runden Ecken versehen können.

div#main div.big-box-top { width: 640px; height: auto; background: url(img/big-top.png) top no-repeat #ffffff; margin-bottom: 20px; padding-top: 10px; }
div#main div.big-box-bottom { width: 640px; height: auto; background: url(img/big-bottom.png) bottom no-repeat; padding-bottom: 10px; }
div#comment ol { margin: 0 10px; padding: 0; list-style: none; }

<div class="big-box-top">
		<div class="big-box-bottom">
			<?php $comments = array_reverse($comments, true); ?>
			<ol>
				<?php foreach ($comments as $comment) : ?>
				<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
				<u><strong><?php comment_author_link() ?></strong> - <?php comment_date('j. F Y') ?></u>
				<?php comment_text() ?>
				</li>
				<?php endforeach; /* end for each comment */ ?>
			</ol>
		</div>
	</div>

Zitat von kaiser

Das nennt sich "Sliding Doors" ... dafür gibt´s haufenweise Tutorials. Ich geh jetzt nicht weiter darauf ein, weil Du die Lösung, bzw. Antwort dort, bzw. in den passenden Kommentaren finden wirst.

Ja, nichts anderes habe ich ja schon gemacht. Aber wie wende ich das in einer Liste an? Ich kann ja nicht <ul><div class="ecken-oben"><div class="ecken-unten"><li>...schreiben.

Habe es hinbekommen. Hab die Div-Container in die Listenpunkte gesetzt.