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