Creating a hollow box with rounded corners for web backgrounds using Photoshop CS5

Posted in Web Design on Tuesday, 10th January 2012 at 9:05AM

Creating a hollow box with rounded corners for web backgrounds using Photoshop CS5

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).

Draw a rounded rectangle in Photoshopo

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).

Change the layer fill opacity in photoshop.

3. Alter the stroke colour (a) and size (b) to your requirements and click 'OK'.

Alter stroke colour and size on Photoshop

4. Rasterize the layer containing your shape and you're done! A hollow rounded rectangle to be sliced up and used for your backgrounds.

Rounded rectangle for web backgrounds

Add your comment

Remember me?

Notify me of follow-up comments?

Just what I was looking for.  Great tip and so easy! THANK YOU!!!

Posted by = on Friday, 25th May 2012 at 5:37PM

thank you for the great tip. just a thing a was looking for

Posted by yokpok on Sunday, 23rd November 2014 at 9:11PM

Michael's Paintings

San Francisco

San Francisco
32 x 52 cm
Acrylics and Indian ink on canvas

Michael's photos

A Kunming local

A Kunming local

Featured Web Project

Michael SIbley Paintings - Home

Project: MIchael Sibley Paintings
URL: http://www.msibley.com