CSS rounded corners no images and no fill colour?

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 side开发者_如何学JAVAs 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>

---

jQuery UI does a great job at only applying the radius to the border, using native CSS:

/* Individual Corners */
.ui-corner-tl {
  -moz-border-radius-topleft: 4px/*{cornerRadius}*/;
  -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; 
  border-top-left-radius: 4px/*{cornerRadius}*/; 
}
.ui-corner-tr { 
  -moz-border-radius-topright: 4px/*{cornerRadius}*/; 
  -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; 
  border-top-right-radius: 4px/*{cornerRadius}*/; 
}
.ui-corner-bl { 
  -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; 
  -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; 
  border-bottom-left-radius: 4px/*{cornerRadius}*/; 
}
.ui-corner-br { 
  -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; 
  -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; 
  border-bottom-right-radius: 4px/*{cornerRadius}*/; 
}

/* All Corners */
.ui-corner-all {
  -moz-border-radius: 4px/*{cornerRadius}*/; 
  -webkit-border-radius: 4px/*{cornerRadius}*/; 
  border-radius: 4px/*{cornerRadius}*/; 
}

Then you can set border or border-color to apply only a border to it.

See the jQuery-UI Themes.css file for more styles.

---

Currently achieving the border radius is only mastered in FireFox (-moz-border-radius: 5px;) and in Chrome (-webkit-border-radius: 5px;).

There are scripts to implement the same effect in IE, however, they are not that great. Mainly when it comes to patterns as background-images. Lets take an example, that you got a pattern as background-image and solid block container with rounded borders on top. The script will produce the borders indeed, but the corners will be solid color and not transparent.

However, there is a way! Its called CSS3 PIE. Learning to use it at first is a nightmare. However, if you get it working..it will be the ultimate solution! CSS3 PIE will add radius to your corners and keep the corner-background transparent. Also, it works great in IE6.

Now, as I understand.. You simply want a border and the container not filled. Well, try the demo on the bottom, in FireFox or Chrome. Is this what you meant? If so, then still CSS3 PIE, is your best bet!

<style>
#demo_container {
    /* The actual trick: */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    /* For making demo more fun: */
    border: 2px solid black;
    padding: 10px;
    margin: 10px;
}
</style>
<div id="demo_container">Stack Overflow</div>

---

This is the closest I could get :P

.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;">

---

Seriously... use border-radius! I don't think it's a good thing to have a lot of code, only to have a great effect for an ancient browser...