Do you make this mistake with border-radius? #css

There's a way to make that using variables

My machinists cert is paying off! 😂

from Kevin to Kevin, tnx

Sir Kevin is at it again, yet another video of me learning new things subconsciously.

So sexy

@KevinPowell, is there a trick for doing something like this when the padding exceeds the outer radius. If I have say a 12px outer radius and my padding is 16px then the result would be -2px.

it actually doesn't look better

Na minha época tinha que ajustar no ps kkk

Sorry I'm a python programmer i have to comment this: ; eww i stepped in shit

I was today years old when I realised this

You save my life <3

Does it though?

Calc is your friend

🎉😂 you are superhero.

Awesome 👍🏼

Kevin on the frontlines of design!

I see you've been at twitter

what if outer element doesnt have padding?

How about making the parent div overflow: hidden; then giving just the parent div a border-radius.

This is why the calc() function exists.

man bro is actually turning crappy style sheets to cascading style sheets

Important tip

This is math, how can people don't understand math?

I too, am a fan of geometry.

Why not just give the radius to outer element only. This should fix, no ?

what should i do if the border-radius is bigger than the padding? i have a card with 4px border-radius and the image in it has the same, padding is 15px on the card, it looks okay to be honest. Do I have to change it only if the border radius exceeds the padding, is this a right assumption?

I am new to the web development journey currently a student, guide me sir if you get some time.

oh my god this is actually so so so useful, i've had many cases where i came across this issue and just eye balled it to fix it

Nice but how does this just work? Lol

css engineer

very helpful! thanks Mr Kevin

Was literally having this issue a couple hours ago, thank you as always!

Can anyone tell how rem and em is working, is it responsive to its parent

Damnnnn i was literally having this problem right now!

Maths!

What if padding and border radius are both 1rem? It would be 0 or do I understand something wrong?

I'd just make it an outline and avoid all that

thanks bro

People so amazed at this… that’s why it’s important to learn the theory, the boring stuff, the technical stuff, they know how… so you don’t have to watch this sht

Would you say this is best handled with variables to avoid the risk of missing to update the "dependants"?

...and what if I told you that I don’t like how both of these options are visually displayed? 🤣In both views they are look not enough naturally.

Actually, the real problem is that CSS defines a border radius using the wrong units. The border radius really needs to define the size of an arc. Hmmm can I define a border radius of 5deg? I'll need to test that out.

Would it cause problems if you used a box-shadow instead to create the border?

Thank you

@KevinPowell Do you know how to make a bot for telegram?

The 🐐 at it again. Thank you Kevin

What do you mean by minus the outer elements minus the padding? So if my div was 300px it would be 300px minus the padding? Confused by the wording.

Hey Kevin,
I am still not good at listening and understanding in English, could you please tell me in writing what you are trying to do and what the trick is?

Hey Kevin,
I'm applying to a web programming and development course for next year and want to thank you for all your shorts and videos as they have helped tremendously on my path towards my career.

a note from me, a noob:
unless the padding is vertically and horizontally same, use variables to organize code

don't scold me if im wrong😅