Code rounded gradient borders with CSS [no pseudo elements]

Published: 08 September 2021
on channel: Leanne R

14,507

291

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! 👑"
}

--

🐤 Say hi on Twitter: / rybaleanne
🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychall...

On this page of the site you can watch the video online Code rounded gradient borders with CSS [no pseudo elements] with a duration of hours minute second in good quality, which was uploaded by the user Leanne R 08 September 2021, share the link with friends and acquaintances, this video has already been watched 14,507 times on youtube and it was liked by 291 viewers. Enjoy your viewing!

413

00:00:00