resize-observer/resize-observer-border-radius.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Resize observer border-radius test</title>
    <style>
      html {
        height: 100%;
      }

      body {
        height: inherit;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      div {
        background-color: green;
        width: 50%;
        height: 50%;
      }
    </style>
  </head>
  <body>
    <div>
    </div>
    <script>
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          if (entry.contentBoxSize) {
            // The standard makes contentBoxSize an array...
            if (entry.contentBoxSize[0]) {
              entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize[0].inlineSize/10) +
                                                              (entry.contentBoxSize[0].blockSize/10)) + 'px';
            } else {
              // ...but old versions of Firefox treat it as a single item
              entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
                                                              (entry.contentBoxSize.blockSize/10)) + 'px';
            }
          } else {
            entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
                                                            (entry.contentRect.height/10)) + 'px';
          }
        }
      });

      resizeObserver.observe(document.querySelector('div'));
    </script>
  </body>
</html>