CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer
Tum
Tum

Reputation: 3652

Why does thick Hr show 2 lines which is ugly (CSS)?

apply this style to make thick HR tag

.thickHr{
    border: none;
    height: 6px;
    /* Set the hr color */
    color: red; /* old IE */
    background-color: red; /* Modern Browsers */
}

Then here is the result in IE & Chrome:

enter image description here

As you can see, there is a tiny line run on top of the thick red line which is really ugly.

So how to remove that tiny line?

If that is the way How Hr renders, then can we have other style (not Hr) that do the same thing?

Note: i still prefers hr than other tyle.

Upvotes: 0

Views: 799

Answers (1)

Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

use border-top or border-bottom

     .thickHr{
      border-top: 6px solid red ;
      color: red; /* old IE */
      background-color: red; /* Modern Browsers */
              }

Fiddle

Upvotes: 1

Related Questions