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.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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/kevinpowell/
Github: github.com/kevin-powell
---
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

[@user-re8lt2gy3g]

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

[@sudarrshang8922]

Wow this is superb

[@goodshiro10]

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

[@Woeden]

Clever, very well explained

[@abhayprince]

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

[@NotKyleChicago]

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

[@elcontrastador]

Stumbled across this…great tip.

[@jp0678]

didn't know that, thanks!

[@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!

[@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

[@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 ❤

[@vitaliiverdiiev7272]

Yooooo, thank!

[@Rkot_scholes]

Greater

[@Sachin-at]

This dude blows my mind every time 🤯

[@oluwarotimiajayi]

Kevin never fails to blooow my mind😮

[@strategistaow3520]

Oh i didn't know that thank you bro

[@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

[@hassamulhaq7762]

Superb

[@cedrichirschi7236]

Nice, awesome content

[@minkeymoo]

Holy shit thats cool

[@juanpasten6077]

Nice!

[@ClaudioBernasconi]

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

[@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.

[@user-xj6fp8mc1o]

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

[@arjunjayakumar4841]

Good info Kev

[@JulienReszka]

Mind: blown

[@TheBaberKhan]

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

[@aram5642]

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

[@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...

[@Gasshette]

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

[@ronaldc8634]

awesome

[@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.

[@diegof9399]

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

[@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.

[@Sinke_100]

👑 of css 🙂

[@satwiksv2749]

Very helpful thank you

[@crowlsyong]

woah. legendary. thank you

[@HeyJes]

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

[@patrykkuniczak2516]

You're amazing ❤

[@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 ❤❤

[@JDalmasca]

Excellent illustration!

[@tarasshevchuk8477]

Nice

[@makl-the-oracle]

gold

[@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.

[@penguinxed]

wow wth i never knew this, awesome stuff mr Kevin

[@DasBauer]

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

[@unhhgcrxexhjvuvujchcrzwzwz7956]

Yaa… definitely knew that lol

[@OnePieceWonPeace]

How do you create beveled/clipped corners?

[@srglmr]

How to make squircle in css ?

[@cheskoxd]

Great information ❤

[@pegak]

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

[@kellychristus2496]

Great information!

[@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 😢

[@josegamarra3532]

What!

[@ShaharHarshuv]

I wonder what's the real word usecase for it

[@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

[@ThomasGHenry]

Huge!

[@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!😂😂😂

[@abhishekrawat6040]

😮🤯

[@BazieleSaah]

Where does this guy learn about these things

[@maxharris748]

Witchcraft

[@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.

[@JaimeBIDtravel]

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

[@raviel498]

😮

[@tiriana2]

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

[@hamdaniash-siddiq5021]

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

[@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.

[@snich1950]

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

[@bechirzouaoui5821]

Qss support this ? Or only css

[@chrisberry6575]

WHO REALLY KNOWS CSS????

[@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

[@Taramushi]

すごい!

[@AnioryX]

Font name ?? Used in vs editor?

[@Animefan-sn1gu]

why are u using px

[@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

[@tinongnjong1305]

Didn’t know lol 😂

[@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

[@encilaj1444]

crazy haha

[@AYA-GAMING_SHORTS]

Op op op

[@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 :)

[@sunofabeach9424]

what the fuck is that language

[@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

[@emjizone]

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

[@AngryApple]

I want a border-squircle-radius 🥲

[@MaximM999]

Omagad