Border top styling (linear gradient) - css

Question

I have an image on which I have added a top border of 20px.
I want to color that top-border in a way that it shows a linear gradient.
I have tried in different ways without success.
Could you guys help me out? This is the code (html and css):
<div class="logo"><img src="images/tiger.jpg"></div>
.logo img {width:100%;top-border:20px solid;}

Answer 1

Please try this. I have made border to use before class.
.logo{position:relative;width:200px;}
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.logo:before{
/* IE10+ */
background-image: -ms-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Opera */
background-image: -o-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffb76b), color-stop(51, #FF7C00), color-stop(100, #ff7f04));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* W3C Markup */
background-image: linear-gradient(to right, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
position:absolute;
content:"";
left:0;
right:0;
width:100%;
height:20px;
top:0;
}
<div class="logo"><img src="https://dummyimage.com/200x200/000/fff&text=sample+image" alt=""></div>

Answer 2

You can add a colored top border like this;
border-top: 20px solid #cccccc;
Instead of #cccccc, you can give the desired color