CODEWITHSUNDEEP
htmlcss
Russell
Russell

Reputation: 665

Border radius rounded corners not showing up on print

I have read with interest this link

But this has not helped me understand why the problem of border-radius not showing up on print.

They display in the browser, but do not print.

HTML

<div class="card">

    <div class = "qr">
    <div id ="qr1"></div>
    <?php echo $_POST["url"]; ?>
    <div id ="qr2"></div>
    <div id ="qr3"></div>
    <div id ="qr4"></div>

    </div>

    <div class = "desc">
    <div>Site title</div>
    <div><?php echo $_POST["titleText"] ?></div>
    <div>Hosting site</div>
    <div><?php echo $_POST["hostText"] ?></div>
    <div>Who made this site?</div>
    <div><?php echo $_POST["orgText"] ?></div>
    <div>Other information</div>
    <div><?php echo $_POST["commentText"] ?></div>
    </div>

</div>

CSS

.qr {
float:left;   
position: relative;
width: 30%;
}

.desc {
float:left;
width: 70%;
}

.card {
width: 100%;
position: relative;
border-top: 30px solid black;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 5px;
}

Everything I have read suggests I am doing this right. Any help spotting what I have missed would be appreciated.

Upvotes: 0

Views: 2719

Answers (1)

Liftoff
Liftoff

Reputation: 25392

Borders and HRs are considered to be background-images, and so by default, will not print with your page. If you want to allow them to print, you will have to manually choose to print the page background.

I don't know where you find this setting on all browsers, but I know that in Chrome, the setting is in the print dialog. I would assume a similar location in other browsers.

enter image description here

Under "+More Settings" > "Options":

enter image description here

Upvotes: 1

Related Questions