CODEWITHSUNDEEP
css
Jelmar
Jelmar

Reputation: 661

Styling the <hr /> element

I am trying to make my <hr /> (hr) element pinkish, and am using the following css rule for this:

hr {height: 1px; color: #ed1d61;background-color: #ed1d61;
}

But there is still a black line showing through it.

(here is a look at it on the site that I am making: http://www.yemon.org/ , its the only horizontal line in the design.

How do i get the line uniform pink?

Upvotes: 40

Views: 67510

Answers (6)

my learning
my learning

Reputation: 11

hr{
    background-color: #ed1d61;
    border-width: 0;
    /*change your size in this place*/
    padding-top: 1px;
}
<hr/>
sadf

Upvotes: 1

Ricardo Sant&#39;Anna
Ricardo Sant&#39;Anna

Reputation: 21

Try this:

.hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    margin: 25px;
}

Upvotes: 2

Marwelln
Marwelln

Reputation: 29413

Change it to this:

hr {
    height: 1px;
    color: #ed1d61;
    background: #ed1d61;
    font-size: 0;
    border: 0;
}

Upvotes: 55

dogbane
dogbane

Reputation: 274532

Looking at your page, I think this would look best:

hr {height: 2px;
    background-color: #ed1d61;
    border:none
}

A demo is here.

Upvotes: 13

Yahel
Yahel

Reputation: 8550

The hr element is made of border so a simple border:none and you'll get rid of the excess.

Then you simply have to play on your height to make it as thick as you'd like.

Upvotes: 5

Brian Flanagan
Brian Flanagan

Reputation: 4632

Try setting the border color property: border-color:#ed1d61;

Upvotes: 6

Related Questions