I'm attempting to replicate the unique teal colored border shown in the image link below:
https://i.sstatic.net/RewiB.png
The border displayed has an irregular pattern, with random breaks and fades. If achieving an exact match is not possible, I would like to get as close as I can.
Can this be accomplished using CSS? If not, are there any alternative methods to achieve a similar effect?
While there is a border-image property available, it requires a specific image which I lack the skills to create using software like Photoshop. Therefore, my options are limited to CSS or utilizing an existing image for the border. Any suggestions on where I could find suitable border images would be appreciated.
https://jsfiddle.net/2oeb569z/1/
HTML:
<div class="container">
<div class="wrapper">
<div class="content">
</div>
</div>
</div>
CSS:
.container {
margin: auto;
margin-top: 20px;
width: 400px;
height: 300px;
background: #131313;
position: relative;
}
.wrapper {
position: absolute;
margin-top: 30px;
margin-left: 20px;
width: 330px;
height: 230px;
background: white;
padding: 10px 15px;
}
.content {
height: 90%;
border: 0px solid teal;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(teal), to(transparent));
background-image: -webkit-linear-gradient(teal, transparent);
background-image: -moz-linear-gradient(teal, transparent), -moz-linear-gradient(teal, transparent);
background-image: -o-linear-gradient(teal, transparent), -o-linear-gradient(teal, transparent);
background-image: linear-gradient(teal, transparent), linear-gradient(teal, transparent);
-moz-background-size: 7px 100%;
background-size: 7px 100%;
background-position: 0% 0, 100% 0;
background-repeat: no-repeat;
}