HomeBorders with curves
In a previous CSS article, CSS and round corners: Boxes with curves, we outlined a method for creating boxes with rounded corners through the power of CSS. A similar technique can be applied to making borders with round corners. We'll start by inserting our four corner curves as background images through the CSS:
The HTML to achieve this effect is:
<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
And the CSS that makes it all happen:
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
If you're not sure how this works please consult the article, CSS and round corners: Boxes with curves for a full tutorial.
Assigning a border
Many of you are probably familiar with the CSS border command, so let's place one around this box:
.bl {background: url(bl.gif) 0 100% no-repeat; border: 1px solid #e68200}
Giving us:
Hmm... that's not looking how it should... What's causing the problem? Have we assigned that border to the wrong <div>? It shouldn't make a difference though, as all the <div>s share the same height and width. The actual cause of our problem is that background images will always appear inside of the border and there's nothing we can do about this.
The solution: more background images
Seeing that we can't use the CSS border command, we'll instead create a 1x1px image, 
(look closely and you can see it), which we'll name dot.gif. We'll attempt to create our border effect by running this image across the top and bottom, and down the left and right, calling it up as a series of background images through the CSS.
First off, we'll remove that border:
Then, we'll run our tiny orange image across the top of the box. We'll need a new <div> to do this:
<div class="t"><div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
And create a new CSS rule:
.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
The CSS command, repeat-x, has been used, which instructs the browser to repeat our tiny image horizontally. The coordinates 0 0 have been used, which represent the image's distance from the top and left of the box edge respectively - in this case, both distances are zero. Our border with round corners now looks like this:
The remaining borders
We'll now call up this tiny orange image three more times from the CSS as background images, so that it runs along the bottom and down the left and right sides. We'll create three new <div>s:
<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div></div></div></div>
And assign three new CSS rules:
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
These three CSS rules take the same orange 1x1px image and each runs it along an edge, repeating it horizontally for the bottom edge (using the repeat-x command) and vertically for the left and right edges (using the repeat-y command). Each CSS command has two coordinates assigned to it, the first being the image's distance from the left, the second its distance from the top. As we wish all images to run along the edge of the box, we've only used the coordinates 0 and 100%.
Our border with round corners is now looking much better:
Beware the order of the <div>s!
This border with round corners effect will only work if the curves are called up after the horizontal and vertical lines in the HTML code. This is because each new <div> is effectively a layer on top of the previous <div>.
By calling up the horizontal and vertical lines first, we can then layer the round curves on top of these lines through our CSS background commands. The outside colour of the curves is white (not transparent) and hides the sharp edges of the corners, creating our desired round corners effect.
The final code
Our finished HTML is
<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div></div></div></div>
And the CSS that makes our round corner border is:
.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at usability testing and knows an awful lot about the user centered design process.
]
[
]