Strange border-color issue - css

Question

I'm creating a toplist of users where I use CSS3 border to create a white-border for the ranking number. Its viewable here: http://www.cphrecmedia.dk/musikdk/stage/channelfans.php
However it seems theres a black border after the border, which I find very very strange. It seems its spill from the background-color.
Its a very minor issue, but I'm very interested in why this actual happens. Does anyone know why? The CSS is very very simple, so it shouldn't happen

Answer 1

To prevent this leak outside border, you need to declare a background-clip property with padding-box. This shall resolve your issue.
The Code change:
#tf span h6 {
background: #333333;
border: 4px solid #F9F9F9;
border-radius: 99px;
color: white;
font: 700 30px/80px arial, sans-serif;
margin-left: -26px;
padding: 5px 13px;
/* The important part to remove the overflow/leak: */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
Hope this helps.

Answer 2

Looks like it is a spill issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=24998

Answer 3

You can add this
box-shadow: 0px 0px 2pt 2pt black;
inside your
#tf span h6 {
}
in .css file
like:
#tf span h6 {
border-radius: 99px;
background: #333333;
color: white;
font: 700 30px/80px arial, sans-serif;
padding: 5px 13px;
border: 4px solid #F9F9F9;
margin-left: -22px;
box-shadow: 0px 0px 2pt 2pt black;
}
it will generate black shadow to your rounded box, so more or less it will become attractive and removes that box kind of issue.