third_party/WebKit/LayoutTests/fast/borders/border-radius-inset-outset.html

   1 <html>
   2
   3 <head>
   4     <style type="text/css">
   5         span {
   6             display: inline-block;
   7             width: 40px;
   8             height: 40px;
   9             margin: 4px;
  10             border-width: 40px;
  11             border-color: #f00;
  12         }
  13         /* the different border-radii styles defined in CSS3 */
  14         #radius {
  15             border-radius: 20px;
  16         }
  17         #topleft {
  18             border-top-left-radius: 20px;
  19         }
  20         #topright {
  21             border-top-right-radius: 20px;
  22         }
  23         #bottomright {
  24             border-bottom-right-radius: 20px;
  25         }
  26         #bottomleft {
  27             border-bottom-left-radius: 20px;
  28         }
  29
  30         #inset span {
  31             border-style: ridge;
  32         }
  33         #outset span {
  34             border-style: outset;
  35         }
  36     </style>
  37 </head>
  38
  39 <body>
  40
  41 <div id="inset">
  42     <span id="radius"></span>
  43     <span id="topleft"></span>
  44     <span id="topright"></span>
  45     <span id="bottomleft"></span>
  46     <span id="bottomright"></span>
  47 </div>
  48
  49 <div id="outset">
  50     <span id="radius"></span>
  51     <span id="topleft"></span>
  52     <span id="topright"></span>
  53     <span id="bottomleft"></span>
  54     <span id="bottomright"></span>
  55 </div>
  56
  57 </body>
  58
  59 </html>