Here's the trick, the CSS shadow effect is done with CSS3. The good news is that all modern browsers except IE will see it, the bad news is that IE is not planning on implementing it until version 9 which is currently in the testing phases. So if you are worried about IE, for the time being what you would do is use Photoshop to make the border and use that as a background image or border and then you can place the text that way. Typically you would create a 3 divs with the same height, the top and bottom have an image with a corner and the one in the middle you would do this:
background: url(pathto/yourimage.jpg) repeat;
margin: 5px 0; //This would give you 5 pixel margin on the sides, 0 on the top and bottom, this can be changed to reach the desired effect
Then just type in that middle div and it will have the appearance you want.
Thanks for tip snakeyes!
I guess that is what I'll do. I wish I could use images as borders in CSS. Like, border-left: url(/images/...)
edit: did some research and I can use images for borer in css3 but I'm not sure if IE supports it. I wish IE was dispelled from the internet
If IE matters to you, you can do this fairly easily with three image slices.
Wow! That tutorial is exactly about what I'm trying to do. Thanks!