<html>

<head>
    <style type="text/css">
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin: 4px;
            border-width: 40px;
            border-color: #f00;
        }
        /* the different border-radii styles defined in CSS3 */
        #radius {
            border-radius: 20px;
        }
        #topleft {
            border-top-left-radius: 20px; 
        }
        #topright {
            border-top-right-radius: 20px; 
        }
        #bottomright {
            border-bottom-right-radius: 20px; 
        }
        #bottomleft {
            border-bottom-left-radius: 20px; 
        }
        
        #inset span {
            border-style: ridge;
        }
        #outset span {
            border-style: outset;
        }
    </style>
</head>

<body>

<div id="inset">
    <span id="radius"></span>
    <span id="topleft"></span>
    <span id="topright"></span>
    <span id="bottomleft"></span>
    <span id="bottomright"></span>
</div>

<div id="outset">
    <span id="radius"></span>
    <span id="topleft"></span>
    <span id="topright"></span>
    <span id="bottomleft"></span>
    <span id="bottomright"></span>
</div>

</body>

</html>