<!DOCTYPE html>
<style>
div {
margin: 2px 20px 10px 20px;
padding: 2px 10px;
outline-width: 8px;
outline-color: rgba(0, 0, 255, 0.3);
display: inline-block;
}
div.solid {
outline-style: solid;
}
div.auto {
outline-style: auto;
}
div.dotted {
outline-style: dotted;
}
div.dashed {
outline-style: dashed;
}
div.double {
outline-style: double;
}
div.ridge {
outline-style: ridge;
}
div.groove {
outline-style: groove;
}
div.inset {
outline-style: inset;
}
div.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.<br><br>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
solid<br><br>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
double<br><br>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
dotted<br><br>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
dashed<br><br>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
ridge<br><br>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
groove<br><br>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
inset<br><br>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
outset
<script>
if (window.testRunner)
testRunner.dumpAsTextWithPixelResults();
</script>