Styling border-right?

Question

I'm working on a left navigation menu, and I need a vertical line to separate the menu from the main content of the page. Now I am using the skeleton framework which includes a custom hr tag that looks great, I have one placed just beneath the title.

However when I use border-right on my menu the line is a bland black line (otherwise unstyled hr tag).

How do I style border-right to look like the Skeleton hr tag? Or should I be using a custom styled div to make a better looking vertical line?

Here's the code for the styled hr:

hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px;    height: 0; }

How can i do this ?

can you provide some snaps on your desired output, or maybe a fiddle. — rockStar, Mar 17 '14 at 07:48
possible duplicate of [How to make a vertical line](http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line) — Hashem Qolami, Mar 17 '14 at 08:36
I was under this assumption that you want to use an `
` element to do so. I'll respectfully delete my answer then. — Hashem Qolami, Mar 17 '14 at 08:37

score 0 · Answer 1 · answered Mar 17 '14 at 07:49

0

You can style the border-right the same way you styled the hr

border-right: 1px solid #ddd;

answered Mar 17 '14 at 07:49

SajithNair

3,867
1
17
23

score 0 · Accepted Answer · answered Mar 17 '14 at 07:50

0

You should be use border-right:1px solid #000000; for right border. Here is an example

answered Mar 17 '14 at 07:50

Ayaz Shah

435
1
5
24

Worked perfectly. Appreciate all the responses to my question! – Sas Mar 17 '14 at 08:10

Styling border-right?

2 Answers2