<!DOCTYPE HTML >
<html >
<head >
<meta charset="utf-8" >
<title >dotted border with radius</title >
<style >
.box {
position: relative;
width: 420px;
height: 420px;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
}
table {
border-collapse: separate;
border-spacing: 10px;
empty-cells: show;
}
td {
border-style: dotted;
border-radius: 24px;
border-color: black;
height: 120px;
width: 120px;
box-sizing: border-box;
}
/* Bug 1303094 - Disable unreliable 1px and 2px tests. */
.no-fill {
border-style: solid;
}
.no-unfill {
border-style: none;
}
.A {
border-width: 1px;
}
.B {
border-width: 2px;
}
.C {
border-width: 6px;
}
.D {
border-width: 8px;
}
.E {
border-width: 16px;
}
.F {
border-width: 24px;
}
.G {
border-width: 32px;
}
.H {
border-width: 48px;
}
.I {
border-width: 60px;
}
</style >
</head >
<body >
<div class="box" >
<table >
<tr ><td class="A no-fill" ></td ><td class="B no-fill" ></td ><td class="C" ></td ></tr >
<tr ><td class="D" ></td ><td class="E" ></td ><td class="F" ></td ></tr >
<tr ><td class="G" ></td ><td class="H" ></td ><td class="I" ></td ></tr >
</table >
<img class="mask" src="border-dotted-radius-filled-mask.png" >
</div >
<div class="box" >
<table >
<tr ><td class="A no-unfill" ></td ><td class="B no-unfill" ></td ><td class="C" ></td ></tr >
<tr ><td class="D" ></td ><td class="E" ></td ><td class="F" ></td ></tr >
<tr ><td class="G" ></td ><td class="H" ></td ><td class="I" ></td ></tr >
</table >
<img class="mask" src="border-dotted-radius-unfilled-mask.png" >
</div >
</body >
</html >
Messung V0.5 C=95 H=91 G=92
¤ Dauer der Verarbeitung: 0.3 Sekunden
¤
*© Formatika GbR, Deutschland