title: Border radius rounded corners not showing up on print
body: <p>I have read with interest <a href="https://stackoverflow.com/questions/24576851/no-border-on-html-table-when-printing">this link</a></p>
  
  <p>But this has not helped me understand why the problem of border-radius not showing up on print.</p>
  
  <p>They display in the browser, but do not print.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="card"&gt;
  
      &lt;div class = "qr"&gt;
      &lt;div id ="qr1"&gt;&lt;/div&gt;
      &lt;?php echo $_POST["url"]; ?&gt;
      &lt;div id ="qr2"&gt;&lt;/div&gt;
      &lt;div id ="qr3"&gt;&lt;/div&gt;
      &lt;div id ="qr4"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class = "desc"&gt;
      &lt;div&gt;Site title&lt;/div&gt;
      &lt;div&gt;&lt;?php echo $_POST["titleText"] ?&gt;&lt;/div&gt;
      &lt;div&gt;Hosting site&lt;/div&gt;
      &lt;div&gt;&lt;?php echo $_POST["hostText"] ?&gt;&lt;/div&gt;
      &lt;div&gt;Who made this site?&lt;/div&gt;
      &lt;div&gt;&lt;?php echo $_POST["orgText"] ?&gt;&lt;/div&gt;
      &lt;div&gt;Other information&lt;/div&gt;
      &lt;div&gt;&lt;?php echo $_POST["commentText"] ?&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>Everything I have read suggests I am doing this right. Any help spotting what I have missed would be appreciated.</p>