Border Code Snippets

Border code snippets to reference later. I ripped it from mode <- use adblock when viewing pls

Normal Sliced Border

.container {
  border-style: solid;
  border-width: 30px;
  border-image-source: url('https://i.postimg.cc/Gmzs22zt/Untitled824-20250926191322.png');
  border-image-slice: 30%;
  border-image-width: 30px;
  border-image-outset: 14px;
  border-image-repeat: round;

Fill Border

  border-style: solid;
  border-width: 23px;
  border-image-source: url('https://i.postimg.cc/FKLJZgqv/fo32-008-a.gif');
  border-image-slice: fill 30%;
  border-image-width: 23px;
  border-image-outset: 10px;
  border-image-repeat: round;

Gif Border

.container {
  border-style: solid;
  border-width: 6px;
  border-image-source: url('https://64.media.tumblr.com/67840c28a5030e5d7947115c99aab7d0/11a43739b8113adf-b0/s250x400/945ee48f21d61a973ff662e92a741cdb9b694ff6.gifv');
  border-image-slice: 15;
  border-image-width: 6px;
  border-image-outset: 5px;
  border-image-repeat: stretch;

No Repeat

.container {
  border-style: solid;
  border-width: 40%;
  border-image-source: url('https://i.postimg.cc/TwGbMDgT/image.png');
  border-image-slice: 40%;
  border-image-width: 40%;
  border-image-outset: 30px;
}

Square Border

 .container {
  border-style: solid; 
  border-width: 4px;
  border-image-source: url('https://file.garden/Z4-KIXj5okOfzeyR/rentry/2869ef95-fd6c-4443-821c-ba1146eb544f.jpeg');
  border-image-slice: 3;
  border-image-width: 4px;
  border-image-outset: 3px;
  border-image-repeat: stretch;
}