3

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.

enter image description here

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>
GibboK
  • 71,848
  • 143
  • 435
  • 658
  • 2
    Dashed borders rendering has had problems for a long time now (initially FF didn't even render them with 50% border-radius). It might be better to use SVG like [in this answer](http://stackoverflow.com/questions/30087463/dotted-dashed-circle-shapes-using-css-not-rendering-right-in-chrome/30093139#30093139) (*The shape there is different and hence I don't think this is a exact dupe.*) – Harry Mar 17 '16 at 08:44

1 Answers1

1

Using the css property of border you can not achieve it.

Css rendering is browser specific and I think the only work around is to use image.

Kiran Dash
  • 4,816
  • 12
  • 53
  • 84