blob: 71c539e0dbacca13baf260e0ff22c104179a56e5 [file] [log] [blame]
<!doctype html>
<style>
div {
width: 10px;
height: 100px;
display: inline-block;
border-width: 85px;
}
.dashed {
border-style: dashed;
border-top-color: rgba(0, 255, 0, 0.75);
border-right-color: rgba(0, 0, 255, 0.75);
border-bottom-color: rgba(0, 255, 0, 0.75);
border-left-color: rgba(0, 0, 255, 0.75);
}
.dotted {
border-style: dotted;
border-top-color: rgba(0, 255, 0, 0.5);
border-right-color: rgba(0, 0, 255, 0.75);
border-bottom-color: rgba(0, 255, 0, 0.75);
border-left-color: rgba(0, 0, 255, 0.5);
}
.solid {
border-style: solid;
border-top-color: rgba(0, 255, 0, 0.5);
border-right-color: rgba(0, 0, 255, 0.75);
border-bottom-color: rgba(0, 255, 0, 0.5);
border-left-color: rgba(0, 0, 255, 0.5);
}
.double {
border-style: double;
border-top-color: rgba(0, 255, 0, 0.5);
border-right-color: rgba(0, 0, 255, 0.75);
border-bottom-color: rgba(0, 255, 0, 0.25);
border-left-color: rgba(0, 0, 255, 0.5);
}
.groove {
border-style: groove;
border-top-color: rgba(0, 255, 0, 0.5);
border-right-color: rgba(0, 0, 255, 0.75);
border-bottom-color: rgba(0, 255, 0, 0.25);
border-left-color: rgba(0, 0, 255, 0.25);
}
.ridge {
border-style: ridge;
border-top-color: rgba(0, 255, 0, 0.5);
border-right-color: rgba(0, 0, 255, 0.75);
border-bottom-color: rgba(0, 255, 0, 0.15);
border-left-color: rgba(0, 0, 255, 0.25);
}
.inset {
border-style: inset;
border-top-color: rgba(0, 255, 0, 0.5);
border-right-color: rgba(0, 0, 255, 0.75);
border-bottom-color: rgba(0, 255, 0, 0.25);
border-left-color: rgba(0, 0, 255, 0.15);
}
.outset {
border-style: outset;
border-top-color: rgba(0, 255, 0, 0.15);
border-right-color: rgba(0, 0, 255, 0.75);
border-bottom-color: rgba(0, 255, 0, 0.25);
border-left-color: rgba(0, 0, 255, 0.15);
}
</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>