Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/borders/borderRadiusAllStylesAllCorners.html 

<html>

<head>
    <style type="text/css">
        span {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 0 2px 0 2px;
            background-color: #ccc;
            border-width: 6px;
            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; 
        }
        
        /* the different border styles defined in CSS3 */
        #dotted span { 
            border-style: dotted;
        }
        #dashed span {
            border-style: dashed;
        }
        #solid span {
            border-style: solid;
        }
        #double span {
            border-style: double;
        }
        #groove span {
            border-style: groove;
        }
        #ridge span {
            border-style: ridge;
        }
        #inset span {
            border-style: inset;
        }
        #outset span {
            border-style: outset;
        }
        
        
    </style>
    <title>CSS3 border-radius uber testcase</title>
</head>

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

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

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

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

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

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

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

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

</body>

</html>