Search code examples
cssimageborder

Can Linear Gradient be used as the color of the border of an image

Can we give linear-gradient as the border of an image?? something like this:

img {
    border: 10px solid linear-gradient(to right, red , blue);
}

If no what else can we do to achieve the same style.

Solution

  • the easiest would be a padding and a background:

    img {
  background: linear-gradient(to right, red, blue);
  padding: 10px;
}
    <img src="https://dummyimage.com/200">

    for a border-image, look at How to make this image a border? and this tool to help you sort it out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator