How to do a thin grey line, like on wikipedia

[chuckee]

Hey,
I was wondering how it would be possible to place a thin grey line on a page (as you can see on any Wikipedia page immediately under any sub-heading). My knowledge of CSS is very limited, so I would be very grateful for any help!
Thanks

[Tourz]

Try

.somediv {border-bottom: solid 1px gray;}

or something like that.

[Robin_reala]

Their exact CSS (given that you're using an <h2>) is:

h2 {
margin-bottom: 0.6em;
border-bottom: 1px solid #aaa;
padding: 0.5em 0 0.17em 0;
color: #000;
font: normal 150%/1.5 sans-serif;
}

[edited by: Robin_reala at 9:48 am (utc) on Feb. 20, 2007]

[Acreo Aeneas]

You can also achieve a similiar effect by using two div layers, the smaller overlapping the top of the larger...something like this...

#layer1 { width: 100px;
height: 20px;
background-color: #ACACAC;
z-index: 2; }

#layer2 { width: 100px;
height: 22px;
background-color: #222222;
z-index: 1; }

This would create virtually the same effect has using 'border-bottom: 2px solid #222222;'

[Robin_reala]

Yes, but ... uh ...

why would you do that?

[ronin]

This is all good if you want to underline a subheading.
If you want just a standalone horizontal rule on the page then you can use something like:

<hr style="height:1px; color:#aaa;" />