View Full Version : Creating custom Borders & Corners

04-07-2011, 02:22 AM
I am trying to figure out the best way to go about coding a design I am working on right now. The design has several boxes of varying widths and heights that each will have a unique border/corners. I came upon an article on ALA that talks about pretty much exactly what I want to do, unfortunately it seems to be quite outdated and doesn't work properly anymore: http://www.alistapart.com/articles/customcorners/

What is the best way to go about coding these boxes? The way I plan on doing it now it to have something like this:

<div id="box">
<div id="boxTop"></div>
Main box content
<div id="boxBottom"></div>

#box would have a 1px high background-image repeated vertically that is the width of the box to create the borders on the sides and #boxTop and #boxBottom would have the top border/corners and bottom border/corners as background-images respectively. In theory this will work just fine, the only problem is I will have to make unique images for each box (because they are different widths). Is there a way to get around this and only have one box that can stretch both vertically and horizontally?