<!doctype html>
<style>
    div {
        width: 10px;
        height: 100px;
        display: inline-block;
        border-width: 85px;
        border-color: rgba(0, 255, 0, 0.5);
        border-right-color: rgba(0, 0, 255, 0.5);
    }
    .dashed { border-style: dashed; }
    .dotted { border-style: dotted; }
    .solid { border-style: solid; }
    .double { border-style: double; }
    .groove { border-style: groove; }
    .ridge { border-style: ridge; }
    .inset { border-style: inset; }
    .outset { border-style: outset; }
</style>
<div class="dashed"></div>
<div class="dotted"></div>
<div class="solid"></div>
<div class="double"></div>
<br>
<div class="groove"></div>
<div class="ridge"></div>
<div class="inset"></div>
<div class="outset"></div>
<script>
    if (window.testRunner)
        testRunner.dumpAsText(true);
</script>