Adding gradient colour to image borders in 7.1

Hi guys, 

I hope you can help me. I'm trying to add gradient colours within all my image border frames. 

I've used this code in CSS to create the silver borders:

.design-layout-inline .image-block-wrapper {border: 5px solid #9b9b9b; overflow:visible!important; box-shadow:inset 5px 5px 15px rgba(0,0,0,0.3)}
design-layout-inline img {margin-left: 25px; margin-top: 25px; }

But I'd like to make them gradient to go from darker silver to nearly white.

Can you please help me?

Thanks so much!

Claudia 

I think you need to use CSS peseudo to add content around image, then you can use CSS background gradient to achieve the request.

Can you share link to page in screenshot? We can check easier.

Thank you. Attached is the screenshot of the page, although the website is not live yet.

You can setup an access password (not login password) & then share url, we can check easier

Sure, please try: 

Url - https://mackerel-rhubarb-66cp.squarespace.com/

Pass: Marcus

Please let me know if you need anything else.

Thanks so much!

Add this CSS

/* Image border gradient */
div#page-section-619b9327f8fb7b60a5a0f5a8 {
.image-block-wrapper {
    position: relative;
    z-index: 9999;
}
.image-block-wrapper:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-image: linear-gradient(0deg, red, yellow);
}}

Amazing! It did work 😀 Thanks so much for your help!!