Bordure dynamique (CSS gap decorations)

Chromium uniquement (version 139 et +). Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.

Votre navigateur ne supporte pas cette démonstration

<div class=demo>
<div>...</div>
<div>...</div>
</div>

*{box-sizing: border-box;}

.demo{
display: grid;
place-items:center;
--cw:1.5px;
background-color:rgb(213, 215, 252);
grid-template-columns:repeat(auto-fit,clamp(calc(50% - var(--cw)),(100vw - 40rem)*-1e3,100%));
border-radius:.5lh;
gap: var(--cw);
column-rule:var(--cw) solid rgb(173, 176, 255);
column-rule-outset:-20px;
row-rule-outset:-20px;
row-rule:var(--cw) solid rgb(173, 176, 255);

}