Create depth border effect or deep border using lists in CSS

Someone asked me how do I create depth border effect or deep border using lists in CSS. Actually he wanted to create a strand effect (divider) between each list item as you can see in the screenshot:

Depth border effect can be achieved using a little CSS trick which I am going to explain in this tutorial. Let’s start with creating a simple list with HTML markup:

Now add the following CSS rules in your page’s style sheet:

This styling will remove the browser-default padding on the ul, set a background, and apply borders to each li to provide a bit of depth.

To create depth border effect to your lists, apply a border-bottom to each li that is a shade or two darker than the li‘s background color. Further, apply a border-top which is a couple shades lighter. It’s the trick to create deep border using lists in CSS.

The only problem to solve is a border will be applied to the very top and bottom of the unordered list which you can see in this zoom below.

To fix these odds, add the :first-child and :last-child pseudo classes.

There we go! now you have a perfect depth border effect or deep border using lists in CSS which I diplayed in beginning of article as image.

If you wish to arrange these list items in horizontal order, use can alter the CSS as per given below:

We have just moved background from unordered list to list items and border-top and border-right are replaced with border-left and border-right respectively. And the output is:

Create depth border effect or deep border using lists in CSS (Light background):

I have written an example of the same using light background color. Check the CSS to obtain the same as shown in screenshot below:

And the CSS rules are: