title: Rounded corners using CSS for generated QR code box
body: <p>I have a requirement wherein I need to change the corners of the QR code capture box to be rounded instead of straight. I am facing difficulty changing it as it is getting generated from the 3rd party library.</p>
  <p>How can I apply border radius to the code structure rather than the container?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="qr-shaded-region" style="position: absolute;border-width: 9px 100px;border-style: solid;border-color: rgba(0, 0, 0, 0.48);box-sizing: border-box;inset: 0px;border-radius: 79px 67px 96px 76px;"&gt;
      &lt;div style="position: absolute;background-color: Red;width: 40px;height: 5px;top: -5px;left: 0px;border-radius: 10px 10px 0 0;"&gt;&lt;/div&gt;
      &lt;div style="position: absolute; background-color: rgb(255, 255, 255); width: 40px; height: 5px; top: -5px; right: 0px;border-radius: 79px 67px 96 76;"&gt;&lt;/div&gt;
      &lt;div style="position: absolute; background-color: rgb(255, 255, 255); width: 40px; height: 5px; top: 325px; left: 0px;"&gt;&lt;/div&gt;
      &lt;div style="position: absolute; background-color: rgb(255, 255, 255); width: 40px; height: 5px; top: 325px; right: 0px;"&gt;&lt;/div&gt;
      &lt;div style="position: absolute; background-color: rgb(255, 255, 255); width: 5px; height: 45px; top: -5px; left: -5px;"&gt;&lt;/div&gt;
      &lt;div style="position: absolute; background-color: rgb(255, 255, 255); width: 5px; height: 45px; top: 285px; left: -5px;"&gt;&lt;/div&gt;
      &lt;div style="position: absolute; background-color: rgb(255, 255, 255); width: 5px; height: 45px; top: -5px; right: -5px;"&gt;&lt;/div&gt;
      &lt;div style="position: absolute; background-color: rgb(255, 255, 255); width: 5px; height: 45px; top: 285px; right: -5px;"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am also attaching the image for more clarification.
  Left one is current qrcode with no rounded corners and right one is the expected behavior with all 4 sides having rounded corners.
  Again I want to say I don't want rounded corners for parent div
  <a href="https://i.stack.imgur.com/RYMiC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RYMiC.jpg" alt="enter image description here" /></a></p>