CODEWITHSUNDEEP
htmlcsscss-shapes
user1355300
user1355300

Reputation: 4987

Strange border issue with Firefox

I am trying to create triangle style shape with CSS, but there a dark line appears on the border as you can see below. It appears in Firefox only, not in the Chrome or IE.

enter image description here

What is causing this and how this can be fixed?

Here's my code:

HTML:

<div>
    <h1>Hello</h1>
</div>

CSS:

div{
    margin: 20px;

}
h1{
    background: yellow;
    padding: 30px;  
    position: relative;
    color: #FFFFFF;
    float: left;
    margin-right: 20px;  
}

h1:before{
    position: absolute;
    left: 100%;
    top: 0;
    content: "";
    border: 20px solid yellow;
    border-width: 0px 50px 80px 0px;
    border-color: transparent transparent yellow transparent;
}

JSFiddle: http://jsfiddle.net/TrQEH/

Upvotes: 5

Views: 815

Answers (3)

albert
albert

Reputation: 8153

You can declare that fuzzy border side as border-style:inset and it clears it up in firefox. simply change your styles from: 

border: 20px solid yellow;  
border-width: 0px 50px 80px 0px;  
border-color: transparent transparent yellow transparent;</code>

to 

border-style:solid inset solid solid;  
border-width: 0px 50px 80px 0px;  
border-color: transparent transparent yellow transparent;

works for me in ff19 and chrome Version 26.0.1410.12 dev-m on windows 7

Upvotes: 1

Ivan Yan
Ivan Yan

Reputation: 475

try: border-style: solid dotted

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

try changing:

border-color: transparent transparent yellow transparent;

to

border-color: transparent #FFF yellow transparent;

Updated jsFiddle

Upvotes: 3

Related Questions