Back to Browse

Code rounded gradient borders with CSS [no pseudo elements]

14.5K views
Sep 8, 2021
4:08

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: https://twitter.com/RybaLeanne 🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychallenge

Download

0 formats

No download links available.

Code rounded gradient borders with CSS [no pseudo elements] | NatokHD