読者です 読者をやめる 読者になる 読者になる

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;
}

こんな感じになります。
f:id:hogesuke_1:20140413100043g:plain

このバグの回避策があるのかは分かりませんでした。