<!DOCTYPE html>
<style>
  div {
    margin: 20px;
    display: inline-block;
    width: 100px;
  }

  span {
    outline-width: 20px;
    outline-color: rgba(0, 0, 255, 0.3);
  }

  span.solid {
    outline-style: solid;
  }

  span.auto {
    outline-style: auto;
  }

  span.dotted {
    outline-style: dotted;
  }

  span.dashed {
    outline-style: dashed;
  }

  span.double {
    outline-style: double;
  }

  span.ridge {
    outline-style: ridge;
  }

  span.groove {
    outline-style: groove;
  }

  span.inset {
    outline-style: inset;
  }

  span.outset {
    outline-style: outset;
  }
</style>

The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners or between lines.<br><br>

<div>
    <span class="solid">Text spanning more than one line.</span>
</div>
solid

<div>
    <span class="double">Text spanning more than one line.</span>
</div>
double<br><br>

<div>
    <span class="dotted">Text spanning more than one line.</span>
</div>
dotted

<div>
    <span class="dashed">Text spanning more than one line.</span>
</div>
dashed<br><br>

<div>
    <span class="ridge">Text spanning more than one line.</span>
</div>
ridge

<div>
    <span class="groove">Text spanning more than one line.</span>
</div>
groove<br><br>

<div>
    <span class="inset">Text spanning more than one line.</span>
</div>
inset

<div>
    <span class="outset">Text spanning more than one line.</span>
</div>
outset

<script>
    if (window.testRunner)
      testRunner.dumpAsText(true);
</script>