April 6, 2012
border-radius bug with <a> tag in Firefox on Mac
Question by Blowski
In Firefox, when I put border-radius
on an <a>
tag, I’m getting little white lines. appearing between the text and the edge of the element. If I zoom in, they disappear.
I tried putting it on JSFiddle, but it’s not replicating the issue.
Does anyone recognise the issue visually?
The whole page is here: http://www.danblows.com/.
The bit adding the border radius is, but just putting the same code onto JSFiddle doesn’t replicate the issue.
.cta, .cta:visited {
background-color:#000000;
border-radius:5px;
border:10px solid #000000;
color:#FFFFFF;
}
Answer by Starx
Link cannot display block properties properly. Give your anchor a display: inline-block;
.cta { display: inline-block; }