cssでborder-radiusのついた枠線が印刷されません。

Question

表題の通りですが、
例えば、

男・女
```という表示で、その人の性別に合った方を
border-radiusを使って丸で囲っていますが、
印刷プレビューと実際に印刷したものは丸が消えてしまいます。

border-radiusを使っていないborderは全て印字されています。

ブラウザはChromeを使っていますが、
Operaでも同様でした。
（ほかも試したかったのですが、印刷プレビューが見れないのと、
印刷のもったいなさから試していません）

何か解決策はありませんでしょうか？

例えば、ですが、
background-imageで背景が透過の黒丸画像を使うというのも考えたのですが、
```ここに言語を入力
キリン・ゾウ・マントヒヒ
```のようにサイズの異なる選択肢もあります。
なので、全選択肢用の画像を作るのは最終手段かな、と考えています。

あ！画像をサイズに合わせて引き伸ばせばいいのか・・・。


borer-radiusが印刷される方法や、
何か他にスマートな手段がありましたらご教示願います。

ちなみに、
Chromeでのプレビュー時に「背景のグラフィック」にはチェックをつけています。
また、border-radiusはベンダープレフィックスを全て記入しています。

--追記--
border-radiusが原因ではありませんでした。
どうもその部分だけが印刷時にcss（index.css）ファイルの内容が反映されていないようで、
直接styleでcssを記入するか印刷用css（print.css）ファイルを設置してそちらに記入すると
枠線が印刷されました。

元々、始めっから印刷プレビューとして表示し、
その部分だけをJQueryで印刷ているため、
印刷用のcssは設置していませんでした。

bootstrapなどのcssの影響かとも思いましたが、
それらを削除しても変わらず、
index.cssは全てのcssの最後に読み込んでいたのを
更にその下にprint.cssをmedia="print"で設置したのですが、
print.cssを削除してindex.cssの最後にprint.cssの内容を記入したとしても
やはり印刷されません。
print.cssにはこれだけしか記入していません。
```ここに言語を入力
span.print_circle{
    border:thin solid black !important;
    padding:2px !important;
    border-radius:10px !important;
}

インライン要素だからダメなのかとも思いましたが
関係はありませんでした。
（その部分だけdivに変えたとしても全くindex.cssの内容が反映されない)

囲いが印字されるようになったのは良いのですが、
本質的解決ではないので気持ちが悪いです。

Answer 1

回答にはならないかもしれませんが、これはバグかもしれませんね……

まず一番ダメだったGoogle Chrome。

普段愛用してるので、一番最初の確認作業もChromeでやってました。お前なら不具合なんておこらないだろ、おーヨシヨシと。
そしたら、CSS3で指定した『linear-gradient（グラデーション）』『border-radius（角丸）』『Flash』が正常に表示されない。
ブラウザからウェブサイトを印刷するときはIEが一番使える | 北の国ウェブ工房

以下のようなHTML（一部の border の style が none の場合）において、borderが正しく印刷、またはプレビューできません。

border-radius 印刷およびプレビュー不具合 - Google プロダクト フォーラム

What is the expected behavior? Same style applied on the screen, border-radius on existing border, no background-color fill. What went wrong? When print preview or printing, Google Chrome fills in the block element with a background-color.

Issue 175539 - chromium - CSS border-radius and missing adjacent border printing problem - An open-source project to help move the web forward. - Google Project Hosting

Answer 2

全く何も不思議なことはありませんでした。

<div id="print_wrapper">
    --省略--
<span class="print_circle">男</span>・女
    --省略--
</div>
```に対して、
index.cssでは
```ここに言語を入力
#print_wrapper span.print_circle{
    border:thin solid black !important;
    padding:2px !important;
    border-radius:10px !important;
}
```print.cssでは
```ここに言語を入力
span.print_circle{
    border:thin solid black !important;
    padding:2px !important;
    border-radius:10px !important;
}
```と書いており、
**JQueryではprint_wrapperの中身を印刷していました。**
自分でもどうして片方には#print_wrapperがついてもう片方にはつかなかったのか、
また、この部分だけしか#print_wrapperがついてなかったのかわかりません。
もちろん対象を絞り込むために#で始める意図はあったのですが、
他にtableやdivなどから始まる部分はある中で、
spanのこのクラスのみ、#print_wrapperから始めていました。
だからそこだけCSSが反映されなかったということです。

みなさん、お騒がせしました・・・。

Answer 3

SafariとChromeは
-webkit-border-radius
を指定で表示されませんか？

Comments

[nobuzoh]

印刷（プレビューも）すると消えています。

[act823]

ベンダープレフィックスを全て記入していますと書いてましたね。
失礼しました。

Answer 4

ie11, ff40 はオッケーでした。