Creating Custom Corners & Borders - By  Søren Madsen

We’ve all heard the rap:

“Sites designed with CSS tend to be boxy and hard-edged. Where are the rounded corners?”

Answer: the rounded corners are right here. In this article, we’ll show how customized borders and corners can be applied to fully fluid and flexible layouts with dynamic content, using sound and semantically logical markup.

The markup

In the example markup below, XHTML line breaks have been inserted to pad out dummy paragraphs:

<h2>Article header</h2>

<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>

<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>

<p>
A paragraph containing author information

</p>

The hooks

If we want full control of the layout, we need to make sure we have enough elements we can target with our CSS. Let’s call these elements “hooks.” Our markup needs just a few more.

First of all, let’s wrap the whole article in a containing div, and then wrap each structural section in an appropriate element:

<div class="Article">
  <h2>Article header</h2>

  <div class="ArticleBody">
    <p>
      A few paragraphs of article text.<br />
      A few paragraphs of article text.
      </p>

    <p>
      A few paragraphs of article text.<br />
      A few paragraphs of article text.
      </p>
    </div>
  <div class="ArticleFooter">
  <p>
    A paragraph containing author information
    </p> 
    </div>
  </div> 

If we examine the markup, we’ll see that we have given ourselves at least five hooks, which is all we need to place customized graphics in each of the four corners (and left side) of our article.

See Step 1 — primary markup.

The design

First let’s decide on some basic layout parameters. Our graphic designer gave us this mockup for reference:

“I want the borders and corners to look something like this,” he said. He also told us to be aware of the fact that all articles may have different widths and heights, and that he still wasn’t sure what kind of background he wanted the articles to have. In fact, he wasn't even sure those were the borders he wanted. “Could you leave that open, or make it so that it’s easy to change?” he asked.

The process

We intend to keep the number of hooks as low as possible, so we’ll have to pay extra attention when we start to prepare the images for our solution, and make sure that the graphics we need are suitable to be hooked up to elements already present in our document.

We have a div containing the whole article. That’ll do for our top left corner and top and left sides. Header elements are block-level by default, and we’ll take advantage of their behaviour: they extend to the full width of their parent element. So we’ll use the <h2> element for our top right corner.

We’ll use our article-footer div for the bottom left corner — and the contained paragraph for our bottom right corner.

Step 1.1 shows how we slice up the sketch.

Note: Obviously, you can use any element to hook graphics up with. Your document’s markup is unlikely to exactly match the structure used in our example. For all we know, you may only have a single paragraph of text to which you hope to apply customized corners and borders. You can easily do so.

As stated earlier, all you need is at least four structural elements. (Depending on the height of your element you may require five.) If necessary, these elements could be nonsemantic divs, each with its own class. Just remember that for a div element to be rendered, it must contain content to manifest its presence. Also keep in mind that if your content lends itself to common structural elements such as headers, paragraphs, and so on, you can and should use those instead of relying on nonsemantic divs.

The styles

To continue, let’s turn on element borders and set a relative width for the div that contains the whole article, to see how things behave:

div.Article {
  width:35%;
  border: 1px solid red; }
div.Article h2 {
  border: 1px solid blue; }
div.ArticleBody {
  border: 1px solid black; }
div.ArticleFooter {
  border: 1px solid blue; } 
div.ArticleFooter p {
  border: 1px solid magenta; }
 

See Step 2 — basic element behaviour

Nothing really surprising here. We do, however, take notice of the gaps appearing before and after our div class="ArticleBody". Ignoring that problem for now, we’ll go on and write ourselves a style sheet:

body {
  background: #cbdea8;
  font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif;
  }
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;
  }
div.ArticleBody {
  background: 
	url(images/custom_corners_rightborder.gif) 
  top right repeat-y;
  }
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;
  }

See Step 3 — first attempt

Not bad at all! Actually better than we expected. Obviously we need to add some padding to our respective elements to make the layout look better — and then there are those pesky gaps to fix. The gaps are caused by the carriage returns inserted by our paragraph (block) elements. We could avoid using paragraph elements altogether and thereby bypass the problem, but — for reasons well-known to ALA readers — we prefer to keep our markup structurally clean and logical. It isn’t our data’s fault that we are lazy stylers.

In our first pass, we assumed that a carriage return must equal 1.5em, as that was the value we specified for our line-height. Therefore our first attempt was to add a margin-top:-1.5em to our ArticleBody and ArticleFooter. It worked perfectly in most standards-compatible browsers — all except the ones used by the 94% of internet users on this planet (no names, please).

After testing, trial, error, rinse, and repeat we find that we must use at least a margin-top:-2em to be sure that the elements touch and the gap closes:

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

Step 4 — looks like we’re finally there!

Backward compatibility?

If you’ve been viewing this example in Netscape 4.x, you’ve probably noticed that the page shows up blank. We’ve found no way to get this technique to work acceptably in NS 4.x, so instead we’re going to hide the styles that the browser in question cannot render properly. NS 4.x does not understand style tags with media="all" specified and we’ve taken advantage of that in the example that follows. We’ve made two style tags, one with styles we want all browsers to render, and another we intend to hide from NS 4.x. Even though it breaks our heart to do so, we’ve also changed our font size specification from ems to pxs. You wanted backward compatibility — you’ve got it.

Step 5 — graceful degradation in NS 4.x

Read more...