Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 15, 2022 at 1:30 pm #1344563
    dondela

    Dear support,
    would it be possible to give elements like a textblox or a column a gradient border like in the screenshot? I would need a gradient with 3 colors from top to bottom:
    #E95A1A
    #6F536B
    #142453
    Thanks for any help!

    March 15, 2022 at 4:36 pm #1344582
    Yigit

    Hi Dondela,

    Thanks for contacting us!

    Please edit your Text Block element and give it a custom ID (“custom-border” in example below) and then add following code to bottom of Quick CSS field 

    #custom-border {
  padding: 1rem;
  border-width: 10px;
  border-style: solid;
  border-image: linear-gradient( to bottom, #E95A1A, #6F536B, #142453 ) 1 100%;
  border-right: none;
}

    Regards,
    Yigit

    March 15, 2022 at 4:44 pm #1344591
    dondela

    Hi Yigit,
    thanks for your help!

    It works, but the “border-right: non;” seems not to work. I still have a thin gradient border on the right side.

    March 15, 2022 at 4:56 pm #1344595
    Yigit

    Hi,

    Please refresh your page a few times. It works fine on my end. I attached a screenshot in private content field below :)

    Cheers!
    Yigit

    March 15, 2022 at 5:06 pm #1344599
    dondela

    HI Yigit,

    you are right: it works on all browsers, except safari on mac. Also on mobile-safari i still see a gradient border on the right side. (See screenshot)

    March 15, 2022 at 6:45 pm #1344633
    Rikard

    Hi,

    Please try this CSS instead:

    #gradient-border {
padding: 1rem;
border-left-width: 10px;
border-left-style: solid;
border-image: linear-gradient( to bottom, #E95A1A, #6F536B, #142453 ) 1 100%;
border-right-width: 0;
}

    Best regards,
    Rikard

    March 15, 2022 at 6:52 pm #1344639
    dondela

    Hi Rikard,
    awesome, this works!
    Thanks for help!

    March 16, 2022 at 8:28 am #1344681
    Ismael

    Hi,

    You’re welcome! Glad we could be of help. Please feel free to open another thread if you need anything else. We will close this one for now.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘gradient border element’ is closed to new replies.