Dashed border with applied border-radius have wrong length in Firefox

I have noticed that applying a dashed border on a div together with border-radius creates "dashed" with wrong length.

Please look at image below near the corners, the problem appears only on Firefox 44 and 46 and looks fine on Chrome 49.

It looks like a bug in FF. I am aware that border-radius is problematic on FF, but I would like to know if there is a work around for that.

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#target {
  width: 300px;
  height: 300px;
  background-color: red;
  border: 10px dashed purple;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}

<div id="target"></div>