Dotted hr using CSS

HTML & CSS
1

Dear All,
Greetings!
I am learning person in CSS.
I wish to draw a horizontal dotted line as shown in following link

As displayed just below “Welcome”. AS dark-green dotted horizontal line can be seen below Welcome. I wish to draw like that.

Similarly, I wish to draw vertical dark-green dotted line as shown in below link http://www.willbuckingham.com/blog

If you have idea.Hope to get help
Thank you
Sheru

2

They would be done by setting the appropriate border on the adjacent block of content.

3

For your first example, it would look something like this:


h3 {border-bottom:2px dotted #000;}

For the second example, it’d be this way:


#my_dotted_column {border-right:2px dotted #000;}
4

Dear Both,
Greetings from Sheru!

Thank you so much from my heart. That worked perfectly.
I will come in touch to both. This is amazing forum…

Sheru

5

Greetings!

I having a bit problem on vertical dotted line. This displays the dotted line but that line goes far down… I am not being able to manage this… I have added margin and height since I did not see long vertical line.

To: kohoutek, I have tried your code as shown below. Thank you so much.


#my_dotted_column {
border-right:2px dotted #000;
margin-bottom: -398px; /* just fit the content */
color: #434F29;
height: 400px;  /* until I specify height, I could not see the vertical dotted line.*/
margin-right: 200px;
}

Your help is appreciated. Thank you for your time and kind help.
Sheru

6

I wish to have dynamic vertical dotted line as right sidebar length increases so the height of the dotted line should increase.

7

Hello,

the right border will expand depending on the height of your first column. If you know your right column will always be the longest, then set the border for that column. If your left content will always be longer, then see example below.

div.content {
    width:800px;
}

div.main-column {
    width:478px; 
    padding-right:20px;
    /* 
This is a 500px wide box.
Need to remove 2 pixels from 
total width to account for the 
2 pixel border + 20px right margin 
*/
    float:left;
    border-right:2px dotted #000;
}

div.side-column {
    width:280px; 
/* 
This is a 300px wide box 
container (280px width + 20px padding) 
*/
    padding-left:20px;
    float:left;
}

h3 {
    border-bottom:2px dotted #000;
    padding-bottom:10px;
}

View demo

You can also use line-height instead of padding for your h3 element. In this example, I have used padding. :slight_smile:

8

Dear kohoutek,
Thank you so much for your precious time and kind help.
Your suggested CSS code worked wonderfully. You have wonderful knowledge in CSS.

Thank you once again from bottom of my heart. Hope to be in touch.
Sheru