After reviewing a helpful article on the topic from this link, I am still struggling to understand why my border-radius is not showing up when printing.
The border-radius properties display correctly in the browser, but fail to print as expected.
Here is a snippet of my HTML code:
<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>
And here is the corresponding CSS code:
.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;
}
Despite following guidelines, the issue persists. Any assistance in identifying what I may have overlooked would be greatly appreciated.