<!DOCTYPE HTML>

<html>
    <head>
        <style type="text/css">
            body {
                margin: 0;
            }

            div {
                box-sizing: border-box;
            }
            
            .container {
                position: relative;
                width: 800px;
                height: 100px;
                border: 1px solid black;
                margin: 10px 0;
                padding: 20px;
            }
            
            .container div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: silver;
            }
        </style>
        <script src="resources/border-radius-helpers.js"></script>
        <script>
            const borderWidth = 20;
            
            const corners = [
                'top-left',
                'top-right',
                'bottom-left',
                'bottom-right'
            ];

            const clipPaths = [
                'inset(60px 10px 640px 60px)',
                'inset(60px 60px 640px 10px)',
                'inset(640px 10px 60px 60px)',
                'inset(640px 60px 60px 10px)'
            ];

            var colors = [
                'green',
                'blue'
            ];
            
            function doSetup()
            {
                for (var index in corners)
                    document.body.appendChild(createReferenceContainer());
            }

            window.addEventListener('load', doSetup, false);
        </script>
    </head>
    <body>
    </body>
</html>