CSS Design: Creating Custom Corners & Borders Part II

Part I showed how to apply customized borders and corners to liquid CSS layouts. The technique works well, as long as your design uses solid background colors. But what if you want to use patterned or gradient backgrounds? In Part II, we’ll extend the technique so you can do just that.

A design problem#section2

We’ve received another directive from our hypothetical graphic designer of Part I. Encouraged by the results of our previous collaboration, he has attached a new sketch he wants us to incorporate. (That’s it on the left. Four rounded corners against a tall, gradient background.)

“It’s easy to change, right?” he asks.

“Piece of cake,” is our initial response.

We’ll start off by slicing up the new sketch, and deal with technicalities later.

See Step 2.1 — the sliced-up sketch.

Why it doesn’t work#section3

The styles for our previous attempt at customized borders and
corners looked like this:

div.Article {
  background:
  url(images/custom_corners_topleft.gif)
  top left no-repeat;
  width:35%;
  }
  div.Article h2 {
  background:
  url(images/custom_corners_topright.gif)
  top right no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  }
  div.ArticleBody {
  background:
  url(images/custom_corners_rightborder.gif)
  top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  }
  div.ArticleFooter {
  background:
  url(images/custom_corners_bottomleft.gif)
  bottom left no-repeat;
  }
  div.ArticleFooter p {
  background:
  url(images/custom_corners_bottomright.gif)
  bottom right no-repeat;
  display:block;
  padding:15px;
  margin:-2em 0 0 0;
  }

This technique works by placing
background images in elements that follow each other
in a document structure. These elements are marked up in
the same stacking level, but will display stacked on
top of each other in the order in which they appear in the
document.

The first element to occur
is placed “under” any following element
unless a specific z-index value tells
the user agent to do otherwise.

In our example,
the large top left background
image is placed within the first element to appear
in our box, which means that our <h2>
and all following elements with background images
will appear on top of it, thereby hiding the
right and bottom corners (and sides) of the top
left background image.

So if we’re going to use borders and corners that
require transparency — like a rounded corner box
that floats freely on a gradient background —  our technique will prove inadequate.
Let’s see what it looks like.

See Step 2.2 — The new graphics applied to the old CSS

How to make it work#section4

The fix is easy. We’ll use relative positioning
to nudge around the boxes that contain the background
images.

In this illustration, we’ve outlined
our div.Article with a solid black,
and our
div.Article h2 with a solid red to show
the technique we’re using. We’ve moved the div.Article
h2 block
containing our top right background image
14px to the right by giving it a right:-14px
value and positioning it relative to its parent
element. (14px is
the width of the top right background
image.)

We’ll simply apply the same principle to all other
elements we need to move, using the width or height
of the background image we want to reposition to determine how much to move each element.

div.Article h2 {
  background: 
  url(images/custom_corners_topright.gif)
  top right no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  position:relative;
  right:-14px;
  padding-left:0; 
/* Compensation for the 
repositioned box */
  }
div.ArticleBody {
  background:
  url(images/custom_corners_right.gif)
  top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  position:relative;
  right:-14px;
  padding-left:0;
  }
div.ArticleFooter {
  background:
  url(images/custom_corners_bottomleft.gif)
  bottom left no-repeat;
  position:relative;
  top:12px;
  }
 
div.ArticleFooter p {
  background:
  url(images/custom_corners_bottomright.gif)
  bottom right no-repeat;
  padding:15px;
  display:block;
  margin:-2em 0 0 0;
  position:relative;
  right:-14px;
  padding-left:0;
  }

See Step 2.3 — Now we’re really getting there

We’ll have to compensate for the repositioned
elements in our final layout calculation, but this
really is all there is to it.

The grand finale#section5

Now we’ll apply our technique to a more complex layout.
This time we’re demonstrating it on a three-column layout with a header from Owen
Briggs. We’ve included three alternate stylesheets for browsers that support style switching (like
Mozilla Firebirdfox),
to demonstrate the drastic design impact that customized borders and corners can have
on your next project.

We’ve also added
a fresh new div to the long center
column, and given it the class name, ArticleLongContent.
We use this div to wrap our ArticleBody if the contents of the article grow too long for our top left background image to cover.

The class contains the following style:

div.ArticleLongContent {
   background: url
 (../images/custom_corners_leftborder.gif)
   top left repeat-y;
  }

See step 2.4 — Our technique applied to a layout with 3 columns and header

Acknowledgements#section6

Thanks to Inge Jørgensen and
Stephen Paul for alternate graphical examples, Brian Alvey for letting me abuse his Browsercam account, and all the people who brought up interesting points in the discussion of Part I of this article.