Different types of horizontal lines in CSS ?
-
Hi, am trying to have 2 different types of horizontal lines within my page (1 thick one, 1 thin one).
Is there any way to have CSS code different types? Using the below code applies to all of my horizontal lines and I can not seem to have different types.
Thank you!
hr {
border: 0;
border-top: 3px double #8c8c8c;
}The blog I need help with is: (visible only to logged in users)
-
Maybe these articles can help you:
https://wpbtips.wordpress.com/2010/10/04/divider-lines/ -
Hi @coherentfinance,
You can assign classes or identifiers to the <hr> element and target them uniquely to have different <hr> styles.Example:
If you want to have these 2 types of <hr> in a single page,
_______________________
————————then the codes look like this(using classes):
HTML<hr class="style_normal"> <hr class="style_dashed">CSS
hr.style_normal { border: 0; border-bottom: 1px solid #000; background: transparent; } hr.style_dashed { border: 0; border-bottom: 1px dashed #000; background: transparent; }Here are some <hr> styles that may help you get started: https://css-tricks.com/examples/hrs/
Hope this helps :)
- The topic ‘Different types of horizontal lines in CSS ?’ is closed to new replies.