CODEWITHSUNDEEP
htmlcssfirefox
GibboK
GibboK

Reputation: 73908

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.

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>

Upvotes: 3

Views: 3951

Answers (1)

Kiran Dash
Kiran Dash

Reputation: 4956

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.

Upvotes: 1

Related Questions