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