Different types of horizontal lines in CSS ?

• 

  coherentfinance · Member · Mar 31, 2017 at 2:45 pm

  • Copy link
  • Add topic to favorites

  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)

• 

  galois · Member · Mar 31, 2017 at 2:52 pm

  • Copy link

  Maybe these articles can help you:
  https://wpbtips.wordpress.com/2010/10/04/divider-lines/

  Borders (pt. 1)

• 

  otpidusprime · Member · Apr 1, 2017 at 8:10 am

  • Copy link

  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 :)