| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| div { |
| margin: 20px; |
| width: 200px; |
| height: 40px; |
| border: 20px solid black; |
| -webkit-border-radius: 30px; |
| -moz-border-radius: 30px; |
| } |
| |
| #justTop { |
| border-top-color: red; |
| } |
| |
| #topAndLeft { |
| border-top-color: red; |
| border-left-color: red; |
| } |
| |
| #topAndRight { |
| border-top-color: red; |
| border-right-color: red; |
| } |
| |
| #topAndLeftAndRight { |
| border-top-color: red; |
| border-left-color: red; |
| border-right-color:red; |
| } |
| </style> |
| </head> |
| <body> |
| <p>When two border sides have different colors, the edge joining them should be anti-aliased. When two border sides have the same color, the edge joining them should not be anti-aliased and no corner joints should be visible.</p> |
| <div id="justTop"></div> |
| <div id="topAndLeft"></div> |
| <div id="topAndRight"></div> |
| <div id="topAndLeftAndRight"></div> |
| </body> |
| </html> |
