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


i have noticed applying dashed border on div border-radius creates "dashed" wrong length.

please @ image below near corners, problem appears on firefox 44 , 46 , looks fine on chrome 49.

enter image description here

it looks a bug in ff. aware border-radius problematic on ff, know if there work around 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>

using css property of border can not achieve it.

css rendering browser specific , think work around use image.


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -