Strange shapes with border-radius | #shorts

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[AbWischBar]

That is a cool hack I did not think of. And so easy to animate. 👌

[paulprice]

I gotta say man, I'm new to the web dev world and basically every video I watch of yours I come away learning something I didn't know already. Really appreciate the work you do on your videos. I'm Learning a lot.

[BrunoMussoi]

The slash splits the two radius from an ellipse, basically the first value is the vertical radius and second is the horizontal (maybe the other way around?). So you can control all corners as ellipses instead of circles (using 4 values, slash, another 4 values)

[naveennamani]

With every video of yours, my respect towards css is growing, now I really wanted to learn CSS in a proper way

[nickj]

Thanks for your awesome videos! They have been sooo helpful... I'm always excited to see what you have to share with us!

[jdanielortega]

Dude these nuggets of knowledge, you gotta keep them coming.

[jaydenmoon]

Just enough to have hours of fun with - thanks!

[seananderson]

I love this short and to the point format that talks about just one thing.

[progressisbeautiful]

Awesome.
I recommend also clipping for shapes.
A bit tricky to handle, but very powerful.

[tharsis]

Aside from when my SASS compiler complains that division shouldn't use '/' anymore due to CSS4, I still continue to forget that forward slashes are a thing you can do now. I could see that 50% / 25% alone getting some use in my projects.

[hyugashikamaru]

This is amazing. Never knew border radius could do this

[FreedomForKashmir]

Thanks for the awesome tips
I really needed this one

[SpencerTaylorOnline]

This is incredibly helpful! I forgot that you can do stuff like this with a border radius. I will certainly keep it in mind from now on, as you can make cool blob shapes as a background for areas, as only one example - and it's all CSS! And you can animate them!

[aram]

Yes, this is a perfect way to leverage when making egg-based decoration :)

[bulent]

I think this topic deserves a longer video.

[fzkod]

Amazing..after 2 years of using border-radius thinking that the only share is a circle ..hoy I discover more awesome shapes ..thanks

[travisv]

Kevin, can you do a deep(er) dive on this? I’m having a hard time grasping the semantics of the CSS and how the numbers are influencing the shape. Love your content!

[koi]

That could make some real pretty buttons and links

[diegomarzo]

WoW Amazing tip! I didn't know about this one! Thank you Kevin!!!

[cephasmutua]

Thanks Kevin, had not thought of that...really cool.