Nice borders, made with pictures

Using images for nice gradient borders is difficult because DIV's often have variable length. The way to solve this problem is to work with nested DIV's. If for example you want to work with these borders:
(left)
(right)

Then use this in your stylesheet:

.main {position: absolute; left: 100px; top: 0px; background-color : #E6E6E6;}
.l {background: url("left.gif") 0 0 repeat-y;}
.r {background: url("right.gif") 100% 0 repeat-y;padding:30px;}

And use this in your page: