CODEWITHSUNDEEP
javascripthtmlcsstagsvisual-web-developer-2010
Bug
Bug

Reputation: 137

How to make a horizontal line without using <hr> tag?

How can I draw a thin horizontal line without using the <hr> tag ?

I tried this:

.horizontal-line{
  border-top: 1px solid #9E9E9E;
  border-bottom: 1px solid #9E9E9E;
}

Although it works, I want this line to be thinner. I tried to reduce 1px to 0.5px, but it didn't work.

Upvotes: 1

Views: 14930

Answers (3)

cbisum
cbisum

Reputation: 146

There are many ways of doing this. we cant make the size of the borders less than 1px in CSS so I have tried this way. Feel free to change the opacity.

.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;

}

Upvotes: 2

flyingturtles
flyingturtles

Reputation: 903

You can use it but there is not much difference. 

.line {
  display: inline-block;
  width: 100%;
  border-top: 0.2px solid red;
}

hr {
  border-top: 0.2px solid red;
}
<div>
  content
</div>
<span class='line'></span>
<div>
  content
</div>
<hr>
<div>
  content
</div>

Upvotes: 1

dir
dir

Reputation: 719

Per this css-tricks discussion, you could give this a go:

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 0.5px solid #9E9E9E;
}
<div class="class-name"></div>

Upvotes: 4

Related Questions