如何将图像边框设置为图像的特定高度和宽度？ HTML/CSS

Question

I have an image attached below for which I want to write css that will provide border to the image from left & bottom. I tried but my code is taking full border

This is the required output that I want.

 img{ border-top: 15px solid #faa633; border-right: 15px solid #faa633; border-left: 15px solid #faa633; }

 <img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="height: 400px;width: 300px">

Answer 1

keep the border transparent and apply a gradient with a specific size:

 img { border: 15px solid transparent; background: linear-gradient(#faa633, #faa633) bottom left/ /* position */ 50% 40% /* width height */ border-box no-repeat; }

 <img src="https://picsum.photos/id/10/200/150" >

Answer 2

如果您只希望图像的两侧有边框，我建议使用 box-shadow。