<!DOCTYPE HTML >
<html >
<head >
<meta charset="utf-8" >
<title >dotted border with radius</title >
<style >
.box {
position: relative;
width: 420 px;
height: 420 px;
}
.mask {
position: absolute;
top: 0 px;
left: 0 px;
}
table {
border-collapse: separate;
border-spacing: 10 px;
empty-cells: show;
}
td {
border-style : dotted;
border-radius: 24 px;
border-color: black;
height: 120 px;
width: 120 px;
box-sizing: border-box;
}
/* Bug 1303094 - Disable unreliable 1 px and 2 px tests. */
.no-fill {
border-style : solid;
}
.no-unfill {
border-style : none;
}
.A {
border-width: 1 px;
}
.B {
border-width: 2 px;
}
.C {
border-width: 6 px;
}
.D {
border-width: 8 px;
}
.E {
border-width: 16 px;
}
.F {
border-width: 24 px;
}
.G {
border-width: 32 px;
}
.H {
border-width: 48 px;
}
.I {
border-width: 60 px;
}
</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 in Prozent C=100 H=100 G=100
¤ Dauer der Verarbeitung: 0.9 Sekunden
(vorverarbeitet am 2026-06-04)
¤
*© Formatika GbR, Deutschland