<!DOCTYPE HTML >
<html >
<head >
<meta charset="utf-8" >
<title >dashed 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 : dashed;
border-radius: 24 px;
border-color: black;
height: 120 px;
width: 120 px;
box-sizing: border-box;
}
.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" ></td ><td class="B" ></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-dashed-radius-filled-mask.png" >
</div >
<div class="box" >
<table >
<tr ><td class="A" ></td ><td class="B" ></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-dashed-radius-unfilled-mask.png" >
</div >
</body >
</html >
Messung V0.5 in Prozent C=98 H=93 G=95
¤ Dauer der Verarbeitung: 0.13 Sekunden
(vorverarbeitet am 2026-06-07)
¤
*© Formatika GbR, Deutschland