 sometimes the designers do something cool and they create these strange shapes that we then have to put into a website which is just boxes and boxes and boxes and sometimes that does mean you have to have an svg clip path but there's actually ways of making shapes like this one and this one and this one and this one just by using your border radius and if you'd like to know how that's done well you're in the right place. Hi there my friend and friends thank you so much for coming to join me once again and if you're new here my name is Kevin and here at my channel I help you fall madly deeply in love with CSS and if I can't get you to fall in love with it I'm hoping to at least help you be a little bit less frustrated by it and today we're going to be doing that by having some fun with CSS and exploring making blob shapey things so right here we can jump right into it and I have set up this little like profile card thing that we're going to be playing with and I'm going to show you we're going to start by sort of understanding how this works and then the fast way to actually do it but understanding it I think is always how I like to roll and so one thing with border radius is when you use a border radius we're actually applying four border radiuses we have four corners so it's a shorthand and the long version is border top left radius and so if I do that and I put this to say five rem and basically the way this works is it just goes from the corner and it goes to five rem and then it just rounds that spar off and then it does the same thing on the other corner it goes five rem down and then it just creates this rounded area between the two of them but did you know you can come here and actually put in a second value and you can give two different border radiuses for a single corner and you know what that one's kind of weird looking let's make this 10 might be a bit easier to understand what's happening so now what it's doing is it's starting here and it's going five across for the top and then it's going here and it's going 10 down for here and then it's connecting them as smoothly as it can and this is actually what we can use to create really interesting shapes so what I can do is I can actually take all of this off and let's just do a border radius and the syntax here is a little bit strange so what I'm going to do is a one rem two rem three rem and four rem to start with and that means we have the one rem the two rem the three rem and the four rem just going clockwise but where things get a little bit weird is then I can put a forward slash and I can put in more values so here I'm going to do the opposite let's do a four rem three rem two rem and one rem and that gives me this really awkward weird shape right now and what this is actually doing is it's this is this top left here that we are looking at before this would actually be giving this a border top left radius of one rem four rem because it's using this value for the first one and it's using this value over here for the second one and then on this one where we have a two it's doing the two and then it's using this three so over here we have a two and a three over here we have a three and a two and over here we have a four and a one so it's a little bit strange how it sort of like jumps across the two with the forward slash but that's just the way it works and to actually come up for me anyway to come up with cool border radius is here can be a little bit hard if you use percentages instead of rem it can definitely make your life a little bit easier but it's still a little bit awkward in my opinion and that's where tools like this one come in which is the border fancy border radius I'll put a link to this in the description and basically it lets you go and just create whatever shape you want and make it that that's your shape and you can see there actually we have it in the background as well it's probably with a shadow actually but we also have some blobs moving around there so you can use this definitely for decorative elements as well so I'm going to copy that and then let's come here and paste in the value that it gave us and now this profile picture all of a sudden gets a little bit more interesting and just for fun here and I just let you know this is not the best thing to animate but let's just come through here and come in and let's just make this shape a little bit different I'm going to copy this value and let's say my dot profile image hover we can do a border radius and throw this new value on there and of course here we can then do a transition border radius we'll do I don't know 500 milliseconds if this would be nice for like a bouncy one but we'll for now let's just do an ease in out just speed things up a little bit and you can animate that and it's not the nicest ones in the world animations on this probably aren't the most performant thing in the world but just if you need like a little personal project that you want to do something fun on or who knows what just some ideas that you could play around with but even without the hover here you could definitely still have something you know a way to add a little bit of spice or extra stuff to your site and if you like this idea of making shapes with css only I have a video where I've looked at making triangles with css borders or if you just like these tips and tricks and other cssy things I have a short playlist both of those are right here for your viewing pleasure and with that I want to say a very big thank you to my supporters of awesome jan johnny steward tim and simon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome