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