How make double rounded borders with CSS3 (and using an extra div)

I couldn't find a way to do this in straight CSS3.

Also, note that by using CSS3, we are oh-so-subtly telling Internet Explorer users (before IE9, anyway) that we don't care that the site doesn't look as pretty as it does to people sensible enough to use good web browsers.

First, let's get the extra HTML out of the way.

This is Drupal 6, using a Zen subtheme. This is in block-sidebar_second.tpl.php, which will be used by blocks in the second sidebar region. (Don't forget to keep a copy of block.tpl.php in your subtheme's templates, or the block region-based suggestion won't be picked up.)

All we have modified here is adding the block-inner div.

<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>">
  <div class="block-inner">
  <?php if ($title): ?>
    <h2 class="title"><?php print $title; ?></h2>
  <?php endif; ?>

  <div class="content">
    <?php print $content; ?>
  </div>

  <?php print $edit_links; ?>
  </div> <!-- /.block-inner -->
</div> <!-- /.block -->

Now we can do the cool, futuristic CSS (note that the block class is provided by classes printed in the PHP above, and region-sidebar-second is provided by the region template by default).

/* Right-side sidebar block borders. */
.region-sidebar-second .block {
  margin-top: 10px;
  border: 10px solid #e5eeef;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 4px;
}

.region-sidebar-second .block .block-inner {
  background-color: #0D4552;
  border: 10px solid #0D4552;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: white;
}