CODEWITHSUNDEEP
cssfirefox
Leon
Leon

Reputation: 2149

Jagged edged border issue in Firefox

I've created a simple CSS play button using borders, which you can see here, using this CSS

.btn-play { 
    border-left:50px solid black;
    border-top:40px solid transparent;
    border-bottom:40px solid transparent;
}

See also: http://jsfiddle.net/o0exn7LL/

This looks fine in Chrome and IE, but in Firefox the edges are jagged. I've seen other issues containing jagged edges in Firefox using 3d transforms, which are solved by adding a transparent outline, but that's not a solution is this case.

Does anyone know if there's a way to get these edges to be more smooth in Firefox?

Thanks!

Upvotes: 0

Views: 277

Answers (3)

Murshid Ahmed
Murshid Ahmed

Reputation: 946

Add -moz-transform: scale(.9999); to your .btn-play

.btn-play { 
    border-left:50px solid black;
    border-top:40px solid transparent;
    border-bottom:40px solid transparent;  
    -moz-transform: scale(.9999);
}

DEMO

Upvotes: 2

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

You can try this -moz-transform: scale(.9999);

.btn-play { 
    border-left:50px solid black;
    border-top:40px solid transparent;
    border-bottom:40px solid transparent;
    -moz-transform: scale(.9999); //added this
}

Demo Here

Upvotes: 2

Luís P. A.
Luís P. A.

Reputation: 9739

You can use border-style: inset;

CSS

.btn-play { 
  border-left:50px inset black;
  border-top:40px inset rgba(255, 255, 255, 0);
  border-bottom:40px inset rgba(255, 255, 255, 0);
}

DEMO HERE

Upvotes: 2

Related Questions