The border-radius feature most people don’t know about

Did you know that each corner of a border-radius can have two different values, one of the X axis and one for the Y axis?
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowel...
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@muhammadfarzat8869]

The explanation makes it 10x better

[@itspawanpoudel]

The visual explanation with cricle*

[@flaviosobbin8274]

Bro knows more than the developers of CSS3

[@LethalLuggage]

Just wanna point out I was doing this trick in web dev 101 my first time ever learning any CSS. We were told to explore what was possible with css3 and all my images had a wonky white border

[@pacitonito1903]

​@LethalLuggage U want a cookie bro?

[@xellr]

anyone who says "bro" has brain damage

[@AnassSanba-f5d]

Because he is full time job is css lol

[@sayeghjoe]

I can’t believe that even after 15 years, you’re still showing me new CSS tricks. You’re phenomenal👏🏻

[@yaarooruvan4310]

bcz css is getting even more features in this 15 years

[@goodshiro10]

that property : 1x the example use case : 10x THAT VISUAL CIRCLE FOR EXPLANATION : beyond infinity

[@sudarrshang8922]

Wow this is superb

[@Lampe2020]

Normally I go right over videos like this, but this one is actually interesting and helpful to me. So congrats, you got me to watch and like a video of a type I would normally skip and not waste a single thought on!

[@Gasshette]

That's a godlike short every developper should see haha thanks for the free knowledge !

[@DasBauer]

I never looked into border-radius' definition. I thought one value per corner was the way. Great video, very helpful.

[@HeyJes]

Great explanation! I knew about this but I always sort of thought the syntax was confusing.

[@terablast]

What the hell, a "feature you didn't know" video about a feature i actually didn't know?! Never knew it was ellipses all along

[@ColinRichardson]

You know.... I DID NOT know this one... This is one of the first surprising css tips I had not known.. I tip my hat to you good sir.

[@NotKyleChicago]

I didn't realize you could do elliptical borders in specific corner like this.

[@RiskyMeal]

I've been looking for this feature for so long!!! Thx man

[@ramzyabdul185]

I just started learning CSS, but I honestly didn't know this and no one mentioned this.. I feel like I will really love css more than ever after watching most of ur videos.. I even get the news reports on my email from u ❤❤

[@elcontrastador]

Stumbled across this…great tip.

[@abhayprince]

I didn't know about it. Going to try it right away

[@arjunjayakumar4841]

Good info Kev

[@Noritoshi-r8m]

Clever, very well explained

[@oluwarotimiajayi]

Kevin never fails to blooow my mind😮

[@Sachin-at]

This dude blows my mind every time 🤯

[@gollamadish]

wait, is it possible for shorthand border-radius to have 8 values?

[@KevinPowell]

yeah, it would look like this: border-radius: 10px 100px 10px 20px / 50px 10px 30px 120px; and it's kinda awkward :D

[@GR_BackingTracks]

Oh, i was missing the slash, ​@@KevinPowell! I could only get 4...

[@aram5642]

Yes, I knew it, I once won a bet that I could draw an egg using pure css!

[@penguinxed]

wow wth i never knew this, awesome stuff mr Kevin

[@mrgamerzyt3945]

I didn't knew we can do border-top-right-radius

[@mrgamerzyt3945]

@@GammaDev. what the helllllll

[@Lampe2020]

Well, I knew that because the Firefox DevTools automatically display a little arrow in the CSS inspector for compound properties, clicking on it expands it to show the value of each subproperty. But I didn't know you can pass two values, although it makes sense.

[@satwiksv2749]

Very helpful thank you

[@Sinke_100]

👑 of css 🙂

[@TheBaberKhan]

How come this is not taught in any tutorial. This seems like a very interesting thing to know

[@patrykkuniczak2516]

You're amazing ❤

[@kellychristus2496]

Great information!

[@Rkot_scholes]

Greater

[@cheskoxd]

Great information ❤

[@SuswagatamRong]

Hey, about the visual guide in the video... do you make those yourself or do you know a website for it? I am learning CSS, so a visual guide would be a great assistance.

[@hassamulhaq7762]

Superb

[@afzalhamdulay]

Bruh. I said to my myself in my head. Yes i know this finally but then you said that you can give two values to border top right and i was like daaaamnnn!😂😂😂

[@JulienReszka]

Mind: blown

[@ClaudioBernasconi]

Whenever I master another CSS level, another level appears. 😅

[@srglmr]

How to make squircle in css ?

[@tarasshevchuk8477]

Nice

[@ronaldc8634]

awesome

[@ShaharHarshuv]

I wonder what's the real word usecase for it

[@ThomasGHenry]

Huge!

[@BazieleSaah]

Where does this guy learn about these things

[@TheCray100]

My cat likes this vid. She slapped you a high five mid way in. 😂

[@Mempler]

Does any browser have a tool to show how the circle radius look like? Like you did in the video. Math is great and all but cant help you if you cannot visualize the result in your head and you have to trial and error

[@theseangle]

He just ran his project with a package called nodemon and it hot reloads on save. On the bottom is the browser that he has open on the side of his screen. He just edited it in to the bottom of the video so it's more visible on phones. UPD: Oops, misunderstood the question

[@KevinPowell]

Mempler, not that I know of, no. I used a pseudo-element to create that, which is why I switched to using custom properties, so it would update the actual radius and my pseudo-element to help visualize it :)

[@Mempler]

​@@theseanglehappens lol

[@bechirzouaoui5821]

Qss support this ? Or only css

[@AnioryX]

Font name ?? Used in vs editor?

[@abhishekrawat6040]

😮🤯

[@allenpaulson8345]

How is the browser support for this

[@emmanuelo1177]

Seriously??? You expect Kevin to answer this when you could just check w3schools or mdn.

[@KevinPowell]

if it supports border-radius, it supports this :)

[@hamdaniash-siddiq5021]

why dont anybody tell us earlier for such an important thing..

[@raviel498]

😮

[@ahmad-murery]

I wish there is a negative border radius

[@darthtorus9341]

So like a concave corner?

[@KevinPowell]

There is talk for some different types of shapes that we might be able to eventually do, but probably a ways of

[@ahmad-murery]

@@KevinPowell Nice, thanks for the info Kevin!

[@ahmad-murery]

@@darthtorus9341 Exactly

[@encilaj1444]

crazy haha

[@AYA-GAMING_SHORTS]

Op op op

[@tiriana2]

And now you can spend 3h choosing the right values and call it "work"

[@emjizone]

Another "did you know?" video again… Read the fu##### documentation ! ;p

[@MaximM999]

Omagad

[@Animefan-sn1gu]

why are u using px

[@soluschristus96]

An in-depth CSS course using such visuals as part of the material for study would make the learning process so much more enlightening ❤

[@angelsv]

This is the reason why I have never been able to learn CSS properly, because there is so many features and properties that can screw up your UI coding 😢

[@Earth_Being]

This gentleman is among those few who can really TEACH. Otherwise whole internet is filled with those D heads who makes you feel like it's beyond rocket science.

[@chrisberry6575]

WHO REALLY KNOWS CSS????

[@Learner156]

when i saw border-radius ..i was like i know atleast this one finally.. within seconds my happiness gone...hmm..oh ..god... it has two i don't know this...again proven you never dis-satisfy with your content

[@cedrictheveneau9141]

Already knew this one, my mentor during my cursus showed me this trick Though I still haven’t had the opportunity to use it cause none ever want ellyptic border radiuses lol

[@BleedingDev]

Does that mean we can have squircles with pure CSS? :O

[@OnePieceWonPeace]

How do you create beveled/clipped corners?

[@Taramushi]

すごい!

[@unhhgcrxexhjvuvujchcrzwzwz7956]

Yaa… definitely knew that lol

[@sunofabeach9424]

what the fuck is that language

[@strategistaow3520]

Oh i didn't know that thank you bro

[@minkeymoo]

Holy shit thats cool

[@jp0678]

didn't know that, thanks!

[@cedrichirschi7236]

Nice, awesome content

[@tinongnjong1305]

Didn’t know lol 😂

[@vitaliiverdiiev7272]

Yooooo, thank!

[@maxharris748]

Witchcraft

[@josegamarra3532]

What!

[@juanpasten6077]

Nice!

[@diegof9399]

I already knew it was possible, but never grasped it 100%. The explanation was awesome

[@JaimeBIDtravel]

Would it be possible to kind of make a vignette speech bubble with this property?

[@JoshuaClancy12]

Kevin Powell you are so helpful. I was wondering the most natural way to create a claymorphism button and you just helped me. Border top right left bottom and different values so it looks handcrafted.

[@crowlsyong]

woah. legendary. thank you

[@snich1950]

How to use that tool that shows a colored green transparent ellipse?

[@The3er0]

I know you can do the same with shorthand with slash for example: border-radius: 10px 10px 30px 50px / 30px 40px 60px 10px;

[@KevinPowell]

Yup! I wanted to look more at how it works though :) - I had the time though, so I probably should have mentioned that at the end.

[@hikari1690]

Wait, isn't this the first thing you learn when reading about border radius? Or has the documentation changed and no longer mentions this?

[@KevinPowell]

It's in the documentation, but most people don't read that 😅. A lot forget too, since you don't use it often

[@JDalmasca]

Excellent illustration!

[@yassinesafraoui]

Oh that's pretty neat! But I wonder where would it be useful 🤔

[@KevinPowell]

You can make interesting blob shapes by doing it on all sides, there are a couple of good generators out there to help too

[@AngryApple]

I want a border-squircle-radius 🥲