Absolutely positioned curved corners

I'm trying to use absolutely positioned images within a div to get a rounded corner effect. I need to use inline images (instead of css background images) because I need to use PNG's which means I need extra support of IE to render PNG's which is easier to acheive with inline images...

Anyway, the problem I'm getting is that as soon as I apply any padding to the body then the positioned images stay at the edge of the browser window in IE.
The code is pretty simple:

<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title></title>  
<style type="text/css"> 
body{ 
padding:20px;} 
#box { 
position: relative; 
background-color: blue; 
} 
img.NE, img.NW, img.SE, img.SW { 
position:absolute; 
} 
img.NE{right:-1px;} 
img.NW{ top:0;left:0;} 
img.SE {bottom:-1px; right:-1px;} 
img.SW {bottom:-1px; } 
</style> 
</head> 
<body> 
<div id="box"> 
<img src="NE.png" width="10" height="10" alt="NE" class="NE"> 
<img src="NW.png" width="10" height="10" alt="NW" class="NW"> 
<img src="SE.png" width="10" height="10" alt="SE" class="SE"> 
<img src="SW.png" width="10" height="10" alt="SW" class="SW"> 
<p> 
Lorem ipsum 
</p> 
</div> 
</body> 
</html>

Absolutely positioned curved corners

problems with IE when using absolute positioning to acheive curved corners

brownthing

Setek

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week