Rounded Content Box

Step 1

Take the Rectangle Tool, for Foreground color choose white, for radius choose 5px, and create the shape like it is shown on the picture below.

On the shape, we will apply the following styles:

Drop shadow

Stroke

Our content box now looks like this:

Step 2

Press and hold down Ctrl key on the content box layer, to select it.

Step 3

Then, take the Rectangular Marquee tool and set the options from the picture below.

Step 4

Using the Rectangular Marquee tool, drag it from the bottom to the top of content box, to delete the part of selection (subtract), to only remain the part of selection on the top, for heading. See the picture below.

Step 5

Create a new layer and for foreground color choose #434343. While the selection for heading is still active, choose Select - Modify - Contract.

Now we have decrease the selection for 2px, from the each side.

Step 6

Fill the selection with foreground color (Shift + Backspace).

Step 7

On the heading layer (Which we have created previously), we will add the shadow and gradient.

Drop Shadow

Gradient overlay

Our content box now looks like this:

For heading, I have used Tahoma font size 13px, fitted on smooth.

Step 8

In an equivalent way like we have created the heading for content box, we will create the remainder. Select again the whole main shape and delete the top part of selection to only the bottom part stay still active. See the picture below.

Step 9

Create a new layer and fill the selection with this color:#434343

Step 10

On that layer add the drop shadow.

Also, cut the content box, and it's prepared for your site :)

Bye!