What causes this CSS border to slice incorrectly?

Question

The link is here and I hope everyone just sees a repetition of the entire border image in each corner:

https://floatinggatesgame.com/devlog/index.html

The CSS is extremely simple for now:

      display: block;
      margin: 0 auto;
      max-width: 900px;
      border-image: url('border.svg');
      border-image-slice: 145px 62px;
      border-style: solid;
      border-width: 62px;

I was learning according to this:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

What did I misunderstand here?

(PS. Yes, I know the tiling isn't set up correctly in my SVG yet, I wanted to see how it looked before I began adjusting it...)

Answer 1

border-image-slice is looking for a percentage value on vector images (SVG), not a pixel value that you would use for a raster graphic (jpg, etc). If you check the inspector on your site, you'll notice it's tagged as invalid because of that so you've hit whatever the browser is deciding to do with your border at this point. See: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

Represents an edge offset in pixels for raster images and coordinates for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.

#devlog-post {
  display: block;
  margin: 0 auto;
  max-width: 900px;
  border-image: url('https://floatinggatesgame.com/devlog/border.svg');
  border-image-slice: 60 40;
  border-style: solid;
  border-width: 62px;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

<div id="devlog-post">
  <h2>
    Random thoughts floating through space and time</h2>
  <p>
    For some reason, the border either draws as just a black line or as small boxes in each corner... I tried to change various settings but nothing seems to help (and I want to keep the code as minimal as possible).
  </p>
</div>