Question

EDIT: Just to be completely clear. My primary interest is NOT IE6 but whatever solution I use does need to work in IE6 without looking completely hideous.

So a solution in which the rounded corners ended up square in IE6 would be fine.

A solution where the rounded corners ended up in random locations in IE6 would not be OK.

---

I have used this tool/technique http://www.spiffycorners.com/index.php?sc=spiffy&bg=FFFFFF&fg=000000&sz=5px to produce some simple rounded corner divs.

Can anyone tell me how to adapt the CSS output by this tool so that the div only has a border (and no fill) ? At the moment you get a solid block of colour (black in this example).

I’m open to completely different techniques but must be imageless and must degrade reasonably for IE6 (‘reasonably’ includes no rounded corners but still get a box)

I’ve tried channging the ‘background-color’ to ‘inherit’ but then I lost the left and right hand sides of the box.

Sample css/html follows:

<style type="text/css">
.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#000000}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #919191;
  border-right:1px solid #919191;
  background:#3f3f3f}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #e5e5e5;
  border-right:1px solid #e5e5e5;
  background:#303030}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #303030;
  border-right:1px solid #303030;}
.spiffy4{
  border-left:1px solid #919191;
  border-right:1px solid #919191}
.spiffy5{
  border-left:1px solid #3f3f3f;
  border-right:1px solid #3f3f3f}
.spiffyfg{
  background:#000000}
</style>



<div>
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>

  <div class="spiffyfg">
    <!-- content goes here -->
  </div>

  <b class="spiffy">
  <b class="spiffy5"></b>
  <b class="spiffy4"></b>
  <b class="spiffy3"></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy1"><b></b></b></b>
</div>

Answer 1

This is the closest I could get 😛

.spiffy1 {
  margin-left: 4px;
  margin-right: 4px;
  padding-left: 1px;
  padding-right: 1px;
  border-left: 1px solid #919191;
  border-right: 1px solid #919191;
  background: #3F3F3F;
}
.spiffy2 {
  margin-left: 2px;
  margin-right: 2px;
  padding-right: 1px;
  padding-left: 1px;
  border-left: 2px solid #303030;
  border-right: 2px solid #303030;
  background: #303030;
}
.spiffy3 {
  margin-left: 1px;
  margin-right: 1px;
  border-left: 1px solid #303030;
  border-right: 1px solid #303030;
}
.spiffy4 {
  border-left: 1px solid #919191;
  border-right: 1px solid #919191;
}
.spiffy5 {
  border-left: 1px solid #3F3F3F;
  border-right: 1px solid #3F3F3F;
}

<div style=" height:100px; border: 1px solid black; border-width: 0px 1px;">