Learn CSS Border Animations in 6 Minutes

Learn all types of CSS Border Animations in 6 minutes with explanations about animations, css pseudo-elements ::before and ::after and how to create a border animation in css using conic-gradients and css variables (custom properties). In this tutorial, we'll show you how to create border animations is css with a glowing border effect and rotating borders.

Become a Member to Support our Channel:

*Source Code on our website*:

* Get our HTML Udemy Course*:

*Host your own website with Hostinger*:
Use our code CODING2GO to get a 10% discount

*What You'll Learn*:
Border Animation with CSS: Animate the borders of a card using pseudo-elements before and after, conic gradients and more
Border Glow Effect: Create a glowing border around your card, that animates too using a ::before element and the filter: blur() method in css.
Animate Gradients: This video explains a little CSS trick that allows us to animate gradients in css, which is not possible by default.
@property rule in css: Creating custom properties with the @proeprty rule allows you to animate css variables using a css animation: 3s spin linear infinite.

Key Points:
Border Animation with CSS,
Border Glow Effect CSS
CSS Pseudo-Elements before and after
CSS animation property
conic-gradient tutorial css
Gradient Animation css

Practical Examples:
Create a multicolored border glow animation with css

Topics:
HTML tutorial, CSS tutorial, CSS pseudo-elements, ::before CSS, ::after CSS, border animation, glow effect, glowing border css, border glow, conic-gradient, css tutorial, for beginners, css pro tip

*Background Music*

Track: "Little Things"

Track: "Scared Of The Glizzy"

Track: "Take Off", NEFFEX

Like & Subscribe for more 😉

[rubenmolina]

I'm doing an online boot camp to be a game dev and needed to make some CSS Effects for an assignment. This video helped me out a lot. Thanks, bro 🙏

[zSLNT]

bro you really give the best css videos out there. you cover the most obscure css properties, you explain and break everything down so clearly and you make your videos short enough to not get draggy. love your content 🔥🔥

[coding__by__HAFIZ]

I found video when I came to yt after being tired from googling border design for button.Then i found this. Thanks for uploading at time

[aurelien_aep]

Was actually trying to do it this morning! This video drop right on time aha

[Arygua]

That was CLEAN! I don't do a ton of CSS in my experience as a full stack dev, just because internal tools don't have to have the fanciest UI but I would like my resume site to look cool and have some uniqueness.

And the presentation of this was just phenomenal, the subscribe button having the animation around the border when you said to subscribe just put the cherry on top.

[wiseguy]

This channel is really getting popular, deserves it too! I like the way you explain stuff like this

[Pvanwoensel]

Using tailwind, I did have to set my box-sizing to initial. After that it worked fine.
Thanks for sharing!

[GlixedYouTube]

Thanks for the tutorial! I’ve been trying to get back into html/css/js, but I didn’t know where to start. But thanks to you, I now know what I really want to do!

[The-CoIIector]

Amazing!!! I didn't even get bored!

[azrfn]

I´m a aspiring computer scientist and it helps me a lot to understand css. I´m bulding my own portfolio website and I´ll integrade the border animations - thanks for help us! Many greetings from Germany!

[kingkilafootball]

Sir what you are doing is crazy😡... Pls continue doing it. You are the best.

[orange_district]

This is insane! Great work. I would never have the patience to dig this deep into CSS myself.

[TheMetalMag]

thx, glad you credited the great CSS teachers on utube!

[nadeemakramansari]

@property --angle {} was the thing that blows my mind. Thank you for making such content.

[mohamedrahal]

Excuse me sir, but your content is just BRILLIANT ! I'm just a beginner in CSS and thanks to you I've understood positions in under 4 minutes, and I'm now we're doing this ! you make it look so easy and simple ...

My mind is blown, you are amazing, thanks ! (and a bigger thanks to those who actually created those CSS functionalities because we're just standing on their shoulders here)

[oleg]

You are blowing my mind with these css videos

[marwanak]

and here I thought you were gonna apply a transform rotation around the origin but you went above and beyond lol you earned a sub for the fun

[Waradu]

inner border radius (10) + padding (3) = outer border radius (13) (for the after/before element in this case)
with this the rounded edges align with themself

[gouravthakur]

Hey Fabian, I've been following you since a while now. You're doing really well with these concise & to the point tutorials, Good luck man!!

[joshuamodiba]

You blew my mind

I was smiling so maniacally