How do I remove this ugly border created inset shadow? - css

Question

How do I remove this ugly border created by a background totally overlapped by a inset shadow? Well, that was the idea anyway.
circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: black;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:inset 0px 0px 0px 0px #ffd300;
transition: all 0.2s ease-out;
}
Code snippet over at Codepen

Answer 1

There is no solution to the actual rendering. (See below the solution for the explanation).
On the contrary, I've played and found a fix for you, which might do the exact thing, by placing an :after pseudo element to mimic the animation exactly as you want it to be.
Click on the "Run code snippet" button below to see if this is exactly what you want.
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:120px;
height: 120px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
font-size: 0;
z-index: -1;
}
.circle:before {
display:block;
content:'';
position:absolute;
background:black;
width:0px;
height:0px;
border-radius:50%;
top:68px;
left:68px;
transition: all 0.2s ease-out;
overflow:hidden;
z-index: 0;
}
.circle:hover:before {
width:100px;
height:100px;
top:18px;
left:18px;
font-size: 48px;
}
.circle:after {
display:block;
position:absolute;
font-size: 48px;
line-height: 90px;
color: black;
transition: color 0.2s ease-out;
content: "J";
z-index: 1;
top:18px;
left:58px;
}
.circle:hover:after {
color: white;
transition: color 0.1s ease-out;
}
<a class="circle" href="#">Click</a>
Explanation to the problem
I've pasted two images of how they are rendered in Webkit (Chrome) and Gecko (Firefox). The shadow is getting pixelated along the edges if it is curved. The same phenomena also happens while drawing a curve.
Image 1, ChromeIt is a 500px x 500px of the same code that you used, just to magnify the effect that we are talking about. You can see those weird ugly border in a better view. Now, try reducing border-radius:50%; to a 20%, 10% or 0%, you will slowly see those ugly marks disappearing. As pixels are square themselves, it renders perfectly in case of a rectangular shape / with straight line edges.
Image 2, FirefoxIn the second image, you can see how Firefox renders the same object (500px x 500px), and adds a secondary unknown border along the outside edge of the circle, which is actually the background:black, going out of the 10px border as well (proof: Change the background to #ffd300 and it will disappear).
To conclude, this aliasing phenomenon is a rendering issue currently for both the major browser engines, though its minimized in actual rendering of the circular object itself, but its more prominent in case of shadows or other things which blurs / blends with other colors. It is not a problem with your code though.

Answer 2

The shape has a background color of black, a 10px outside border of yellow, and a 50px inside border of yellow. This seems to be so that when you hover, it will change the inside of the circle to red.
To get rid of the little sliver completely, you could just change .circle's background to #ffd300 (or whatever).
This breaks the animation, however, so you might want to add background:black to .circle:hover.

Answer 3

You can change your CSS to this:
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:none;
background: black;
transition: all 0.2s ease-out;
}
Basically, move the back background to hover state and get rid of the box-shadow. Of course you'll have the border on hover, because it goes with your approach, but at least you won't have the border on default state.
Remember that you can use multiple box-shadows by simply separating them with a comma, but either way, no matter how many you add, you will have this border because the border-radius:50% will add it. For reference, try taking the border-radius definition out and you'll see that border disappear.
In short: the only way to get rid of that border at all times, is to use 2 elements: an outer div with background color #ffd300 and an inner div with background color #000 and the J, otherwise you'll have that border, it's just how CSS works

Answer 4

if you add to the CSS a border-width: 0px;. See http://www.w3schools.com/cssref/pr_border-width.asp