Code rounded gradient borders with CSS [no pseudo elements]

In this video, I show you any easy way to create rounded gradient borders using CSS and no pseudo elements.

00:15 - credits
00:40 - adding a square gradient border using border-image, linear gradients and border-image-slice
01:34 - adding a border radius onto my div
01:56 - creating a rounded gradient border by moving the gradient onto a background image
03:22 - limitations of this technique

--

const me = {
name: "Leanne 👩🏻",
passions: ["coffee☕️", "code 💻", "cats 🐱"],
unpopular_opinion: "LOVES CSS ❤️",
favorite_colors: ["hotpink", "orangered"],
channel_aim: "Show the world that CSS is fun and web development rules! 👑"
}

--

[TwoLeggedTriceratops]

Great explanation! Also, you have a really interesting cadence to your speech that makes each word very clear.

[CodewithLeanne]

In any case, go and check out SoySudhanshu Codes’s video (above), it’s a really cool technique ❤️

[TheHumanistX]

Thansk for this! Seems to be the only option I could find to have rounded corners for the border with a gradient in the border as well. I wanted the background of my container to be transparent so the background image from the parent body element would still show through. So far, it seems that we cannot do this :(

[Mr.samomar]

Wow that was so perfect, thank you so much .

[rGGdom]

Wow! finally a method that works! thanks!

[faizsayyed]

Thank you so much, Works for my project

[Kay_Drechsler]

Great trick! Keep up your excellent work!

[theSallar]

Hello leane, my question is that if we have an image in a div and and we need to make a gradient border with radius around it, how will the image show? I think you just demonstrated a div with a white bg what about there is an image inside

[geldelian]

Very useful, but with this method it is impossible to make a transparent button

[Bartek-xmuq]

thanks a lot, that was perfect and clear

[zahdh]

Thank you so much, it worked for me! I subscribe ^^

[allgame]

It canot do the transparent background.