How To Create Inverted border-radius Card With CSS

This Idea Inspired By Kevin Powell's Videos • Creating an inverted b...
------------------
Click For More : th-cam.com/users/OnlineTutor...
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
CSS Infinity Course : www.udemy.com/course/infinity...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/course/complete...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Source Code : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutorialsweb.com
Buy Me A Coffee : www.buymeacoffee.com/onlineTu...
------------------
#onlinetutorials #csseffect #topcsseffects
------------------
give proper credit if you repost this on other social media platform
------------------
image source : www.pexels.com/
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

[@KevinPowell]

Loved it! Fun seeing another approach here. Never would have thought of using the box-shadows of transparent circles 👍 - Just made me think of a really simple way to do something that I had been doing in a much more complicated way previously as well, thanks! 😅

The best Crossover ever!!!

[@OnlineTutorialsYT]

Thanks Kevin, you also completed this challenge very beautifully, I learned a lot while doing this.

[@ScriptyVijay]

so are we going to see another approach on your channel sir

[@CMB696]

Happy to see you both hear Kevin and online tutorials ✌️

[@sylvesterpromise3300]

​@@CMB696 Me too

[@deepakjoyjose8189]

This is a fantastic approach to solving this challenge. Great tutorial as always.

[@inariiii]

I love this 😭😭😭🥺😭😭❤️❤️❤️, i even love it more that Kevin replied here and both my legends know each other now 😭🥺❤️

[@manuelenng]

I always knew Online Tutorials was crazy with CSS. A literal guru

[@NurioonSoftware]

Im glad you follow these trend challanges between the Css legend players. Cause ure one of them too

[@balajiravi9259]

Good to see this css legends👏

[@farhan_jiwani]

Very clever!
I'll try it out on one of my side projects 😊

[@tomail1167]

Excellent job of implementing it this way.

[@love4ever026]

wow awesome logic for the border, i created similar one but code was mess and long which would be trouble for a new guy to read and understand and i used many div elements!!

[@lukas.webdev]

Awesome! Very helpful video and I love your approach here... 😉🔥

[@ketosensei8549]

you're amazing! you make it easier!

[@anonymous_basics]

you are our favourite online css instructor 😍 take love brother.

[@heidar_dev]

amazing card and wonderful trick to round the corners so practical thanks a lot

[@sudsierspace9010]

WOW good idea and design and skills

[@codeinmobile]

Man gye guru🎉🎉❤❤❤❤

[@paracodewebdev]

Your video is mind blowing bro ❤❤❤🎉🎉

[@RobiulIslam-dn9mm]

wow bro! awesome

[@NguyenMinh-yr6wu]

very nice bro

[@Iskael]

love it

[@bh-slys]

osham boss 👌

[@xantaclaws]

Is this a sequel to Kevin Powell's creation ? 😂 ... Loved it by the way

[@dhrt6126]

thanks

[@muhammadadnanzafar473]

Love to see your design..but make videos also with the help of elementor and copy pasting the codes

[@fatokifemiemmanuel8565]

Waoow

[@raghavwastaken]

Pretty nicer way... His looked a little advance. Yours is a little bit simpler

[@wandtellermann]

hey there, with a border radius of 50% by ::after and ::before there are some annoying pixels.
Using a border-radius of 10px makes it better.

[@i_AmCurious]

❤

[@basitjawad4090]

I understand everything but with video if you have explained what were you doing it would be much more better. but still it was great🎉🎉

[@neutralitat2570]

Clipping would make css cleaner 😉

[@sanicspeed1672]

Cant you place the top at a lower z index, gove the bottom one border radius and a border and would work thr same?

[@OnlineTutorialsYT]

I will do this experiment and tell

[@sanicspeed1672]

@@OnlineTutorialsYT it wouldn't work with background image but with a solid color it should work

[@muhammadadnanzafar473]

How to add spots on the image and make it color ful in Elementor?

[@-xyzan-]

what is the purpose for doing position: relative; on all elements ?

[@abhaykumar9806]

its really annoying, isn't it?

[@-xyzan-]

yeah
@@abhaykumar9806

[@vice-108]

Wha was use of those 2 circles at the end??

[@ZqzBiG6xbn4qXaxSa05eQ9]

to use their solid box-shadows to make the desired curves

[@princemakwana3285]

Hello bro I need help you can help me ?? Please ans

[@theishu404]

Hello brother, I was working on one project but their is one problem I don't know how to animate a border while someone input:focus please bro tell me please. If you need any details I will give you about my project.
But Please help me.

[@OnlineTutorialsYT]

th-cam.com/video/BMphVl9suxA/w-d-xo.html i hope its helpful to you

[@MrDarkYT56]

Make a polyrhythm with dots it's moving infinite when it touches then music is play i watch a video it's awesome
Chanel Name :- Hypeplexed
Pls make a complete video on it ❓

[@pankichal]

Kevin Powell?

[@lolous-studio]

I think he tried to do it with his own approach after seeing Powell's video

[@pankichal]

I thought about that too

[@user-xf5df6bj4y]

When ur use border-radious -> this inside radious and outside radious NOT the same! but when ur using box-shadow it's just the shadow and it's not good look cause u have FAT Line.

[@HikaruAkitsuki]

Nevermind. I still doing it on Illustrator.

[@proteus1]

Im sure you canndo this with less css and another way.

[@memestomeme5566]

Sir instead of music plz put ur voice

[@MikeHerzog_de]

That’s the style of the videos 🤷‍♂ 😁

[@OnlineTutorialsYT]

my english and communication skills are not good bro that's why i use music in my videos

[@goodshiro10]

bro, explain with some voice and code, music sucks

[@grigoldvali4124]

thank you for your work, cann you send me link of google. font. please, thank you !!