CSS radial gradients rule applies to all browsers but Firefox - css

Question

I am applying this CSS rule to some divs on a web application. Basically I need to display a border around the div, but without using the border property.
It works on every browser but Firefox. Can anyone help me understand what I'm doing wrong?
div {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image: radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
background-image: -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
background-position: top, right, bottom, left;
background-size: 1px 1px, 1px 1px;
background-repeat: repeat-x, repeat-y;
}
<div></div>
https://jsfiddle.net/za74L1st/1/
Many thanks!

Answer 1

This a job for linear-gradient not radial-gradient.
.box {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image:
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede);
background-position: top, right, bottom, left;
background-size: 100% 1px,1px 100%;
background-repeat: no-repeat;
}
<div class="box"></div>
You are for sure facing subpixel rendring issue since you are defining very small circles having less than 1px radius. If you increase the values you will see something on Firefox:
.box {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image:
/* doesn't matter what you put here as value since the background-size is already small */
radial-gradient(#dedede 51px, transparent 51px),
radial-gradient(#dedede 50px, transparent 50px),
radial-gradient(#dedede 99px, transparent 5px),
radial-gradient(#dedede 54px, transparent 54px);
background-position: top, right, bottom, left;
background-size: 1px 1px;
background-repeat: repeat-x, repeat-y;
}
<div class="box"></div>