In this tutorial, we will go over how to create Custom CSS Dividers for your website. A new modern trend in webdesign is to use the <section> tag to layout stacks of content on top of each other. Most of the time these sections are decorated with dividers of different color or shape. In order to get this effect, we must utilize CSS’s :before & :after properties to place content before and after the sections. Our example will look like the image below.

Custom CSS Dividers

Setting Up the Document

First we will need to set up our document. For this example we are keeping it simple and will not make our document responsive. This is merely a demo to show you how to utilize two CSS properties to design your site. We will setup three sections and give each one a class that can be used again in future classes.

The markup is relatively simple and requires very little structuring. This will make it each to add to our site and make it maintainable in the future.

Adding the CSS

We will break down the CSS into four parts. The first part is simply a foundation for us to work off of. This typically consists of resetting the body and defining common styles. Notice that in the Section CSS properties that we have declared the :before and :after to be absolute positioned so we have control over the elements positions.

Section Style 1

This first CSS divider will place a slanted line on the top of your section. This is a good trick to add a splash of color to each section instead of having a dull solid top border. By transforming a darker blue square and laying it behind the section we are able to get this effect.

Section Style 2

The next style is a rather simple solution and similar to the first style. This time it is the same color as the section, making you believe that the section itself is something other than a square.

Section Style 3

Our last example gets a little bit trickier. We will create two shapes using both the :before and :after elements and combine them to make a “V” shape on the top of our section.

Wrapping It Up

This technique can be very useful when modernizing the look of your site and trying to create a “Flat UI” look to your site. Test out the different values in these examples and see what other results you can get.