Aller au contenu principal
Guillaume Duverger Code & graphisme icodink.com Création de sites web modernes et graphisme

Bordure dynamique (CSS gap decorations)

Accueil blog Démonstrations CSS MAJ : 21 juillet 2025

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

Lorem Ipsum

  • dolor sit amet
  • dolor sit amet
  • dolor sit amet
  • dolor sit amet
  • dolor sit amet
  • dolor sit amet

Lorem Ipsum

  • dolor sit amet
  • dolor sit amet
  • dolor sit amet
  • dolor sit amet
  • dolor sit amet
  • dolor sit amet



<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);

}