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;
}

Screengrab of issue

Answer by Starx

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

.cta { display: inline-block; }

TESTED 🙂

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!