Multi-color Divider

There are a few places on my website where I’ve used the border on my containers to create lines between different sections.  Right now, the lines are just plain black.  So I thought I’d see if I could find a way to jazz them up a bit, and so I’ve found a way to make a multicolor line.


First, make sure you have a larger container for the line to live in:


One quick note, making this “big” container isn’t necessary if you’re adding the line at the end of something on your website already living in a larger container.  Just make sure that you have a div in your HTML code that you can put sections in to add the lines.

Now, pick how many colors you want and create containers for each of those colors.  Using the border-bottom (or border-top) function, you can add just a horizontal border to your container and specify type, size, and color.





You’ll notice that I made the height of each container pretty small; I did that on purpose so that the containers will be less likely to mess up the layout on a page.


The HTML is pretty simple.   First, make sure you have some div for your “big” container.  Second, create a section for each color that you have, specifying the classes in the order that you want the colors to appear.   Make sure you close each section  before making the next section.  I only used two colors, but I alternated them so my HTML code looks like this:




The final product looks like this:



The lines I have there are pretty thick; on my actual website I’d probably tend to use a 1-2px border as opposed to 5px.  You can adjust the length of each segment by simply adjusting the width of the respective container in the CSS.  A word of caution though: if you make the border dashed or dotted, you’ll want to make sure you have margins on your color containers that will keep the space between the colors.  Here’s what happens if you don’t have the margins:



Adding a “margin-left:5px;” line for each container makes it look much better:



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s