Strange border-color issue

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.