fast/borders/fieldsetBorderRadius.html

<html>
<head>
    <title></title>
    <style>
        legend { height: 10px; border: 1px solid blue; }
        fieldset { margin-bottom: 10px; -webkit-border-radius: 5px; height: 20px;}
        fieldset.render { border: 8px double; }
        fieldset.render legend { height: 12px; width: 50px; background-color: rgba(0, 128, 0, 0.3); border: none; }
        div.rel { position: relative; height: 40px; }
        #col1 { float: left; }
        #col2 { float: left; margin-left: 70px; }
        #col3 { margin-left: 450px; }

    </style>
</head>
<body>
    <!-- border rendering tests -->
    <div id="col1">
        <fieldset class="render" style="width: 100px;">
            <legend></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="width: 108%;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="width: 112%;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="width: 117%;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="margin-left: -12px;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px; border-width: 15px; border-style: solid;">
            <legend style="margin-left: -12px;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px; border-width: 15px; border-style: solid; -webkit-border-radius: 20px;">
            <legend style="margin-left: -12px;"></legend>
        </fieldset>
    </div>
    <div id="col2">
        <fieldset class="render" style="width: 100px;">
            <legend style="margin-left: -16px;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="margin-left: -21px;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="margin-left: -69px;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="margin-left: -74px;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="margin-left: 115%;"></legend>
        </fieldset>
        <fieldset class="render" style="width: 100px;">
            <legend style="margin-left: 120%;"></legend>
        </fieldset>
    </div>
    <!-- layout tests -->
    <div id="col3">
        <fieldset style="width: 100px;">
            <legend style="width: 150px;"></legend>
        </fieldset>
        <fieldset style="width: 100px;">
            <legend style="width: 90px; margin: 30px;"></legend>
        </fieldset>
        <div class="rel" style="width: 100px;">
            <fieldset>
                <legend style="width: 150px;"></legend>
            </fieldset>
        </div>
        <div class="rel" style="width: 300px;">
            <fieldset style="width: 100; margin: auto;">
                <legend style="width: 150px;"></legend>
            </fieldset>
        </div>
        <div class="rel" style="width: 100px;">
            <fieldset style="position: absolute;">
                <legend style="width: 150px;"></legend>
            </fieldset>
        </div>
        <div class="rel">
            <fieldset style="position: absolute; width: 100px;">
                <legend style="width: 150px;"></legend>
            </fieldset>
        </div>
        <div class="rel" style="width: 300px;">
            <fieldset style="position: absolute; left: 100px; right: 100px;">
                <legend style="width: 150px;"></legend>
            </fieldset>
        </div>
        <fieldset style="display: inline; width: 100px;">
            <legend style="width: 150px;"></legend>
        </fieldset>
        <fieldset style="width: 100px;">
            <legend style="width: 150%;"></legend>
        </fieldset>
    </div>
</body>