I count myself as being fairly proficient with Photoshop but at the same time I am sure there are a lot of very basic techniques that I am unaware of and until recently this was one of them. Whilst there are a few different ways to achieve HTML curved corners for your website including javascript methods and CSS3, for those clients who insist that their site looks identical in every browser the only reliable solution is to use 2 background images on an outer and inner element.
I have always been convinced that creating these graphics should be very simple to do in Photoshop and as it turns out they are, but for years my half-hearted Google searches came up with nothing satisfactory and I was left using rounded marquee fills or importing vectors from illustrator, neither of which were particularly quick or satisfactory to look at.
My New Years resolution was to find out how to do this properly in Photoshop and to write it up in case anyone else is struggling with the same problem. The answer is embarrassingly simple.
1. Create a new document and draw a rounded rectangle (a) setting the corners to the desired radius (b).
2. Double click the new shape's layer (a) to open the layer style dialog box. Reduce the fill opacity to 0 (b) and open the stroke panel (c).
3. Alter the stroke colour (a) and size (b) to your requirements and click 'OK'.
4. Rasterize the layer containing your shape and you're done! A hollow rounded rectangle to be sliced up and used for your backgrounds.