CSS bugs in FF and IE? Transition including borders yielding unexpected results in both. Or how would I align the behavior?

Question

I'm trying to create a CSS transition which gives the desired result in Chrome, but IE (10 and 11) and Firefox (41) differ (each gives a different result, but they all fail to display the border, see for yourself in the Codepen linked below):

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: green;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  transition: all 1s ease-out;
  box-sizing:border-box;
  border: 0px dotted green;
  box-shadow:1px 1px 20px black;
}

.box:hover {
  border: 99px dotted green;
  background-color: red;
  border-radius: 500px;
  cursor: pointer;
  transition: all 0.5s ease-out;
  transform: rotate(2turn)
}

http://codepen.io/anon/pen/EVvrYx

Would you say this a bug in both IE and Firefox? Because the definition of border seems quite straight forward and consistent with the behavior in Chrome.

Yet both FF and IE show nothing at all in the final transition state.

(btw also fun effects if you hover over the edge of the figure in Firefox, not a bug though I guess but only occurs in FF)

Answer 1

To have a round div you set the border to 50% of the width/height, more might cause unpredictable result, which might explain the border differences.

If you change the border from 99px to 9px and set the border-radius to 100px it seems to work in IE/Edge/FF/Chrome equally, though the dotted border differs.

And according to this, Firefox has a border/radius bug, https://bugzilla.mozilla.org/show_bug.cgi?id=382721, where when you combine border-radius and dotted style, it shows a solid border instead of a dotted.