How to Add Border Between Sidebar widgets

How to add border between sidebar widgets

Ever wanted to have a separation between your sidebar widgets, like a dotted line, etc. 

Well, look to this blog sidebar and you'll see that I just added a dotted line. 

Now let me tell you how to do this: 

Copy the code below:
.sidebar .widget {
border-bottom: 2px dotted #000000;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Now, I'm going to tell you how to change this up to your preferences, but first let's get the code into your CSS box.

STEP 1

Go to Layout>Customize>Advanced>Add CSS. Click on Add CSS. Now I don't know about you, but I have quite a bit of stuff already in that box, so I go down to the bottom and get my cursor several lines below the last bit of code. One way to do this is to put your cursor at the end of the last word and hit Enter. Add the code and Save.

What I added to mine was a 2 pixel dotted black line (black is #000000). I imagine you could put solid if you didn't want dotted, but I didn't try that. That's really the only line, the second line, that you need to mess with.

I have either learned or written down in a blog tips notebook what color hex codes I prefer. Go here to pick out a color you like. It would be smart to do this before you add the code. Or you could add the code, Save, and then come back and change it.

When you get to this website, mine is likely set to red shades, so look to the left and pick any color you want and then go through the various shades. Write down the hex code you like. It is # and six letters/numbers.

Now you want to figure out how thick you want your separator to be. I put mine at 2 pixels. Play with it till you get it where you like it. Then click Save.

That's it!

{Note: I got this CSS code to work on this blog, but not Color My Decor. I am looking for a fix. So if this code does not work for you, I will be trying to figure out why. Let me know if it does not please.}