border-radiusで角丸にした際にborder-styleのdottedやdashedが反映されないバグ
少しハマってしまったのでメモしておきます。
border-radiusで角丸にした際に、border-styleのdottedやdashedが反映されないバグがFireFoxに存在します。角丸部分のborder-styleは問答無用にsolidとなってしまいます。
border-radius - CSS | MDN
382721 – Dotted/dashed border-radiused corners are rendered as solid
このバグは2007年に報告されているのですが、現在でも修正されていません。修正の必要なしとしているのか、何らかの理由で修正できないのでしょうか。
サンプル
たとえばこんなcssの場合。
.sample { border: 2px dashed #ADADAD; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
こんな感じになります。
このバグの回避策があるのかは分かりませんでした。