2 Ways To Create Gradient Borders In CSS

preview_player
Показать описание
Download source code here:

-----------------------------------------------------------------------------------
Little note about the 2 methods:

METHOD 1:
- Pretty Straightforward.
- When used with border-radius, the border-radius property gets ignored i.e your element cannot have border-radius with this method.
- Cannot be animated.

METHOD 2:
- Border radius can be applied.
- Can be animated easily.

-----------------------------------------------------------------------------------

❤️Get in touch:

-----------------------------------------------------------------------------------

⭐Tools Used:

Text Editor: Sublime Text
Live Coding: Browser Sync Plugin

-----------------------------------------------------------------------------------

🎵Music:

Track: Doing Nothing — sakura Hz [Audio Library Release]
Music provided by Audio Library Plus

Intro Music:
Track: JPB - High [NCS Release]
Music provided by NoCopyrightSounds.
Рекомендации по теме
Комментарии
Автор

I want you to ask that both the methods used are using position: absolute & relative.

Can we use another method naming flexbox & grid rather than position property, it will make speedy performance & less no. of line of code.

What do you

arjunshinde
Автор

Thanks for posting this! Do you have a solution if the user needs to see what's behind the box and the body/bg isn't just a solid color?

michaelyonke