Question

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 1

Link cannot display block properties properly. Give your anchor a display: inline-block;

.cta { display: inline-block; }

TESTED 🙂