Using linear-gradient() in the border-image property does not actually generate a border

Question

Using linear-gradient() in the border-image property does not actually generate a border

I am attempting to add a linear gradient border around a dynamically created div using JavaScript. However, I am not seeing the border show up as expected and it is not displaying in black.

Check out my code snippet below:

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>

I am running Firefdox version 126.0.1 (64-bit), which should support the use of gradient with the border-image property from v29 onwards.

javascript html css border

Answer 1

Answer №1

To add a border to your elements, you can specify the style in your .css file like this:

border-style: solid;

According to MDM, it is important to note that "some browsers may not render the border image if the border-style is set to none or the 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;
  
  /* This attribute is necessary for proper rendering in some browsers */
  border-style: solid;
}

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

<div id="devlogs"></div>

Answer 2

To add a border to your elements, you can specify the style in your .css file like this:

border-style: solid;

According to MDM, it is important to note that "some browsers may not render the border image if the border-style is set to none or the 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;
  
  /* This attribute is necessary for proper rendering in some browsers */
  border-style: solid;
}

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

<div id="devlogs"></div>

Answer 3

Answer №2

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>

Answer 4

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>

Using linear-gradient() in the border-image property does not actually generate a border

Answer №1

Answer №2

Similar questions

Access denied for generating login hint on target domain in javascript web application for Google sign-in

Tips for utilizing a personalized extension in Visual Studio Code

Increase the size of the image beyond the boundaries of its container

Creating a responsive navbar with a custom width form

What is the solution to the error message "Cannot assign to read only property 'exports' of object '#<Object>' when attempting to add an additional function to module.exports?"

unable to apply custom css to primefaces components

When I click the mouse, my drawing function starts lines from the top left corner instead of the latest point

Personalize the appearance of dynamically generated DIV elements

Challenges encountered in d3.js when parsing through data sets

The useEffect hook in ReactJs is triggering multiple times

How can I incorporate eventData when using .bind() for the "keydown" event type?

What is the best method for translating object key names into clearer and easier to understand labels?

Using the width property to style a div element

Problem with AJAX updating CSS class

Passing a class as a parameter in Typescript functions

Is it possible for me to transfer a class attribute to a directive template in AngularJS?

As the browser window is resized, the gap between images widens while the images themselves decrease

What is the functionality of the icon `<i>` in Twitter Bootstrap?

What causes the sudden disappearance of the returned value from AJAX?

Retrieve all items from the firebase database