<!DOCTYPE html>
<html>
<head>
<style>
    #shape-inside {
        position: relative;
        width: 400px;
        height: 400px;
        -webkit-shape-inside: rectangle(10px, 10px, 250px, 250px);
        -webkit-shape-padding: 50px;
        font: 50px/1 Ahem, sans-serif;
        color: green;
    }

    #shape-outline {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 400px;
        height: 400px;
    }
</style>
</head>
<body>
    <p>You should see a filled green square within a black outline.</p>
    <div id="shape-inside">
        <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg">
            <rect x="58" y="58" width="154" height="154" stroke="black" fill="none"/>
        </svg>
    XXX XXX XXX
    </div>
</body>
</html>