Striped Border Content Box

In this tutorial you'll learn how to create a nice striped boarder content box. This is a trend I've been noticing more and more in the web world.

Pre-Step:
Before we begin we're going to need to create a simple stripe pattern. Open up a new document 5x5 pixels in size and draw a diagonal line in black, just as I did.

Define the pattern by going to "Edit>Define Pattern," Now our pattern is ready for use. You can close the document now.

Step 1:
Open up a new document with plenty of space for you're box. I'm just making an example one so my document is 500x500 pixels.

Fill the background a nice light grey (#dbdbdb).

Step 2:
Now that we have a canvas to work over, create a new layer. Now grab the rounded rectangle tool, with a radius of 5 pixels, and create a black rounded rectangle the size you want the box.


Step 3:
Set the Fill of this layer to 2%. Now open up blending options and apply pattern overlay with the following settings.

Here's how the box should look so far:


Step 4:
Create another new layer. Now ctrl+click on the striped box layer to make a selection of it. Contract the selection by 10 pixels (select>modify>contract).

Fill the selection white on the new layer we created.


Step 5:
As you can see when you contract the selection it doesn't maintain the border radius. Lets fix that. Create a new layer and zoom in real close. Grab the rounded rectangle tool and draw a rounded box the same exact size.


Step 6:
Create another new layer. Get a selection of the white box and contact it by 5 pixels. Set your foreground color to black and grab a soft brush the width of the box, place it like I did.

Click once.


Step 7:
Lower the opacity to 7% and it should create a nice shaded effect.


Step 8:
Add some text and you're done, here's how it should look: