Runde hjørner - optimering

Hej

Har en side med runde hjørner lavet således

#round
{
height:300px;
position:relative;
width:300px;
}
#border
{
border: 2px red solid;
}
#bottomleft, #bottomright, #topleft, #topright
{
  height: 16px;
  position: absolute;
  width: 16px;
}
#bottomleft
{
  background: url(corners.gif) bottom left;
  bottom: 0px;
  left: 0px;
}
#bottomright
{
  background: url(corners.gif) bottom left;
  bottom: 0px;
  right: 0px;
}
#topleft
{
  background: url(corners.gif) top left;
  left: 0px;
  top: 0px;
}
topright
{
  background: url(corners.gif) top right;
  right: 0px;
  top: 0px;
}

<div id="round">
<div id="topleft"></div>
<div id="topright"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>
<div id="border">
Content
</div>
</div>

Det, jeg spekulerer på, er om div'et border kunne undgås, men hvis jeg flytter border-erklæringen hen i #round og ændrer hjørnernes positioner fra 0 til -2, lægger hjørnerne sig under kanten. Man får således en blanding af en rund og firkantet kant.

Er der nogen måde at omgås dette på - z-index ser ikke ud til at virke.

/Hallandsen