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.