By Søren Madsen

Part I of "Custom corners" demonstrated how to apply customized borders and corners to fully fluid CSS layouts, but a limitation of that, was that it only worked well in design contexts with solid background colors. In part II; this article, we'll extend the capabilities of the technique so that it'll also work with ie. gradient/pattern backgrounds.

We received an email from our graphic designer again. He was happy about the results so far, and attached a new sketch he wanted us to incorporate. "That's easy to change, right?", he asked. "Sure it is" was our initial response.

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

Why it doesn't work

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

See step 2.1 — how we slice up our new sketch.

This technique worked by placing background images in elements that follow eachother in a document structure. These elements appear in the same stacking level context, but are placed on top of each other in the order they appear in the document structure – the first element to occur, is placed "under" any following element, unless a specific z-index value is telling the user agent to do it otherwise. In our example, the large top left background image is placed within the first element to appear in our "box" – our <h2>, and all following elements with background images will appear on top of that, and thereby hide the right and bottom corners (and sides) of the top left background image.
So if we are going to use borders and corners that require transparency – like a rounded corner box that has to be able to float freely on a gradient background – our technique will prove itself inadequate. let's see what it looks like.

See step 2.2 — Initial behaviour with the new graphics applied to the old CSS

How to make it work

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

In the illustration on your left, we've outlined our div.Article with a solid black, and our div.Article h2 with a solid red, to show the principle we're using to move things around. The div.Article h2 block containing our top right background image, is moved 14px to the right, by giving it a right:-14px value, and positioning it relative to it's parent element, the div.Article. The 14px is the width of the top right background image.

We'll simply apply the same principle to all following elements we need to move, according to width or height of the background image we want to reposition: 

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

Obviously you have to compensate for the repositioned elements in your final layout calculation, but this really is all there is to it.

The grand finale

Yet again we've provided an example below, where we apply our technique to a more complex layout. This time we're demonstrating it on a 3 column layout with a header from Owen Briggs. If your browser supports style switching (like Mozilla Firebirdfox), we've also included three alternate stylesheets, to demonstrate the drastic impact on look and feel, customized borders and corners can have on your next project. Furthermore, we've added an additional div to the long center column, and given it a class name ArticleLongContent. This is a div we use to wrap our ArticleBody in, if/when we know that the contents of the article will get 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

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