User login

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

Searched words: 
css3 rounded borders css border spacing css3 space between border and background

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

A light colored border, a white (transparent) space in between, and a blue background, all rounded.

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;
}

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.