'How to get a bordered picture with two different colors

I have a picture in HTML and I want to set a border with 2 different colors (with different width), here is an example:

enter image description here

So far I have this code:

<style>
#stream
        {
            border-style: solid;
            border-width: 0px 20px;
            border-left-color: #00b000;
            border-right-color: red;
            border-left-image: linear-gradient( 0deg, blue 80%, red 80.001%); /*Not working*/
        }
</style>
<img id="stream" src="bla.png">

I tried using a linear gradient but it's not as expected (I didn't want a fade).

htmlcss


Solution 1:[1]

Use the CSS3 border-image property and select a suitable image to have "wrapped around the picture."

See: W3School and CSS Tricks You can also use the above details with an SVG syntax to create dynamic border images,

So:

CSS
The Border.png is a small file of two colours as detailed in your question image.

.module {
  border-image-source: url('/path/to/border.png');
  border-image-width: 20;
  border-image-outset: 1;
  border-image-repeat: space;
}

HTML

 <img src="bla.png" class='module'>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Glorfindel

Related Questions