Html Question posted in
Some basic documentation can be found here.

Html – border-image: linear-gradient(); doesn't create border

I’m trying to make a linear gradient border around a div I’m creating dynamically with JS. Unfortunately, no border shows up, as far as I can tell (and no, the border’s not (or shouldn’t be) showing up black.

Here’s my code:

const devlogList = document.createElement("ul");
devlogList.classList.add("cards");

const devlogs = [{
  name: "Upriver (placeholder)",
  gradientTopLeft: "red",
  gradientTopRight: "blue",
  imageSrc: "exampleimage.png",
  description: "description",
  status: "status",
}];

for (let i = 0; i < devlogs.length; i++) {
  const devlogItem = document.createElement("li");

  const devlogDiv = document.createElement("div");
  devlogDiv.classList.add("devlog");

  const devlogTitle = document.createElement("p");
  devlogTitle.style.color = devlogs[i].gradientTopLeft;
  devlogTitle.innerText = devlogs[i].name;

  const devlogStatus = document.createElement("p");
  devlogStatus.innerText = devlogs[i].status;

  devlogDiv.appendChild(devlogTitle);
  devlogDiv.appendChild(devlogStatus);

  devlogItem.appendChild(devlogDiv);

  devlogList.appendChild(devlogItem);
}

document.getElementById("devlogs").appendChild(devlogList);
.devlog {
  list-style-type: none;
  border-image: linear-gradient(to bottom right, blue, red) 1;
  width: 500px;
}

body {
  background-color: black;
  color: white;
}
<div id="devlogs"></div>

Also, I’m using Firefox v126.0.1 (64-bit), which is supposed to support the use of gradient with the border-image property as of v29.

Tags:

2

Answers


  1. 0

    Just set border-style in your .css

    border-style: solid;

    Per MDM "some browsers don’t render the border image if border-style is none or border-width is 0."

    const devlogList = document.createElement("ul");
devlogList.classList.add("cards");

const devlogs = [{
  name: "Upriver (placeholder)",
  gradientTopLeft: "red",
  gradientTopRight: "blue",
  imageSrc: "exampleimage.png",
  description: "description",
  status: "status",
}];

for (let i = 0; i < devlogs.length; i++) {
  const devlogItem = document.createElement("li");

  const devlogDiv = document.createElement("div");
  devlogDiv.classList.add("devlog");

  const devlogTitle = document.createElement("p");
  devlogTitle.style.color = devlogs[i].gradientTopLeft;
  devlogTitle.innerText = devlogs[i].name;

  const devlogStatus = document.createElement("p");
  devlogStatus.innerText = devlogs[i].status;

  devlogDiv.appendChild(devlogTitle);
  devlogDiv.appendChild(devlogStatus);

  devlogItem.appendChild(devlogDiv);

  devlogList.appendChild(devlogItem);
}

document.getElementById("devlogs").appendChild(devlogList);
    .devlog {
  list-style-type: none;
  border-image: linear-gradient(to bottom right, blue, red) 1;
  width: 500px;

  /* NOTE Needed by some browsers */
  border-style: solid;
}

body {
  background-color: black;
  color: white;
}
    <div id="devlogs"></div>
    Login or Signup to reply.
  2. 0 
    const devlogList = document.createElement("ul");
devlogList.classList.add("cards");

const devlogs = [{
  name: "Upriver (placeholder)",
  gradientTopLeft: "red",
  gradientTopRight: "blue",
  imageSrc: "exampleimage.png",
  description: "description",
  status: "status",
}];

for (let i = 0; i < devlogs.length; i++) {
  const devlogItem = document.createElement("li");

  const devlogDiv = document.createElement("div");
  devlogDiv.classList.add("devlog");

  const devlogTitle = document.createElement("p");
  devlogTitle.style.color = devlogs[i].gradientTopLeft;
  devlogTitle.innerText = devlogs[i].name;

  const devlogStatus = document.createElement("p");
  devlogStatus.innerText = devlogs[i].status;

  devlogDiv.appendChild(devlogTitle);
  devlogDiv.appendChild(devlogStatus);

  devlogItem.appendChild(devlogDiv);

  devlogList.appendChild(devlogItem);
}

document.getElementById("devlogs").appendChild(devlogList);


.devlog {
  list-style-type: none;
  border-image: linear-gradient(to bottom right, blue, red) 1;
  width: 500px;
  border-style: groove
}

body {
  background-color: black;
  color: white;
}


<div id="devlogs"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search