| <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> |
