Html CSS round corner help stacking elements

I am trying to create an round corner with an image. But I get get on top of the other images.

My code:

<div style="width:468;height:60; border:1px solid #cccccc;border-right:none;position:relative;">
<span style="background: url("../images/showk开发者_StackOverflow社区ontopleft.png") no-repeat scroll 0% 0% transparent; width: 5px; height: 5px; top: 0pt; left: 0pt; display: block;"></span>
<a target="_blank" href="/link/8" style="float:left;display:inline;">
<img style="width: 468px; height: 60px; border: 0pt none; display: block;" src="http://dk.orvillemedia.com/ads/banners/514/468x60.jpg" alt="468x60">
</a>
</div>

Problem:

give height to div and add style position:absolute to span.

I'm not sure what your specific problem is, but you should be aware that the argument to url() isn't quoted. Your reference should be:

url(../images/showkontopleft.png) 

Also, why are you putting a background-image on an inline element? What do you hope to gain from that?

Do not stress yourself over image rounded corners, just use css, http://bit.ly/O2Fl

I know, I know, "What about IE?". Leave it alone. It deserves the jagged corners.

Just my take.

So You want to have an image on other image. How about

<img class="corner" src="corner.png" style="position:relative; z-index:1" />
<img class="main-image" src="main.jpg" style="position:relative; margin-top:-10px z-index:0" />

?