New CSS Property corner-shape Is Amazing

All of these fancy CSS shapes are now possible because of a brand new CSS property that makes creating all of this as simple as one or two lines of CSS. And no, it's not some crazy mask or anything like that. This is the corner shape property, which I think is an incredible new CSS property that's going to change how we write lots of stuff going forward. Welcome back to WebDev Simplified. My name is Kyle and my job is to simplify the web for you. And to get started with this corner shape property, I first just want to tell you what it does before we dive into some of the fancier use cases for it. So the whole idea behind the corner shape property is it lets you decide what the shape of your border radius looks like. By default, if you define a border radius on an element, so we'll come in here with a border radius. We'll just say that it's going to be 50 pixels. You can see that we get this nice perfectly rounded corner on our box. And that has been the default forever. But we've never been able to modify that, which has been kind of troublesome when you want to do more complicated things with your CSS. This is where the corner shape property comes in cuz now we can just type in here corner shape. And now we can specify what we want. By default, this is going to give a value of round. That's what gives you these perfectly round corners. But we can do the exact opposite of round by typing in scoop. Scoop essentially inverts your border radius. So instead of rounding outward, we instead now round inward, which we can use to create some really cool different designs. For example, if I made this element just a little bit wider, we'd say it's 300 pixels wide. You can see I kind of get this nice little like ticket or badge style shape that I can use inside my application. Maybe I want to crank up this border radius a little bit. Or maybe that was a little bit too much. We'll go back to 60. But you can see we get this nice little cool design for this particular element. And we have lots of other placeholders we can use. For example, scoop gives us that nice inverse border radius. We can also use bevel. And bevel essentially allows us to create a perfectly straight line between these two. This is really nice because now we can essentially create like stop signs or hexagonal shapes or something like that using these perfectly straight lines that we would never be able to do before without like rotating shapes 45 degrees, which is kind of a pain. The next value I want to talk about is a very self-explanatory one. It's square. All it does is just turn off your border radius completely. I know that may sound counterintuitive, but there are certain use cases where this is useful, and I'll show them in a little bit, but that's kind of your default styles for what you get out of the box. The only other one that I haven't talked about is notch. So, we type in notch. Notch is essentially the inverse of square because what it does is instead of squaring off our borders, it gives us an inverse square going in. So, as you can see, we can make like a red cross style plus shape or other things of that type. Now, we can also customize this much further because just having those default values isn't super useful. So instead, we can use this super ellipse function, which allows us to pass a value from negative infinity all the way to positive infinity. But more often than not, the values you're going to be using are going to be relatively small between maybeg -3 and positive3. A value of positive one gives you our round border. That is the default value for round. So round and super ellipse of one are the exact same value. Negative 1 gives us the inverse. So that gives us that scoop value that I showed just a little bit ago. If we type in zero here, that gives us that perfectly straight line that goes between our two different border locations. And then infinity and negative infinity are our other ones. So if I type in infinity, you can see here we get a square. Essentially, there's no rounding at all. And then if we go to negative infinity, you can see that we get that nice little check or X style shape where it perfectly just cuts in and notches out that part of our corner. And to see the difference between these, we can kind of change this around. So let's say I wanted to have this be three. The larger you make this number, the smaller that your radius is going to be. Essentially, it's going to become less and less rounded as your number increases. And as you decrease that number, it's going to become more and more rounded even into like decimal numbers of.5 until eventually when we get to zero, there is no rounding at all on the outward direction. Every time we go negative, we're now rounding inward. So you can see as we get more and more negative, we're just rounding this more and more inward until eventually when we get to negative infinity where there is essentially no rounding being applied at all. That's kind of how this works. It stretches between that negative infinity to that positive infinity. And that's how we can actually create that animation that I showed at the very beginning of the video. Essentially, if I just take all of this code for our box and I bring it out here, this is that animation. And you can see it's animating between these different states. You can see here that we have a border of 10 pixels that's black width and height. Everything else is exactly the same. The only difference is we now have an animation that's doing this alternating animation. And the corner shape here is being changed from infinity, so a full square, all the way to -3. So it's essentially giving us this nice shape right here. Now, the reason it's shrinking and growing so much more than our other example is cuz I have the border radius set to 100%. If I were to change this to a hard-coded value, such as 50 pixels, you can now see it's animating within that 50 pixel section. But by setting it to 100%, you can do some really interesting things by really growing or shrinking your shape however you want based on what that corner radius is. And if I go all the way to, for example, negative infinity, my shape actually completely disappears when it gets all the way to the very end because there's nothing left. And then it reappears as it grows back outward. So this is a really cool use case to be able to do different animations like a twinkling star kind of effect or just different things with your border radius. Now, this becomes even more impressive when we start to apply this corner shape to just certain sides of our element instead of every single side because you can do only so much by doing it on every single side. So, instead, I'm going to copy over this icon code. And I'll show you what it does in a second, but we're just going to copy it over. This is one of the examples from that introduction. And if I paste that down and I zoom this out a little bit, you can now see we have essentially just a corner shape on one side. And it's a very basic corner shape. I've just said that the top right corner, because you can do this with any corner you want. So, we're saying the corner shape on the top right is going to be a scoop shape, which gives us that scoop. And then all I'm doing is absolutely positioning an element in that top right hand corner that has a width and a height that kind of matches. And you can see we're able to get these exact lines to match up with the shape we have here because we know a scoop is exactly an inverse of a border radius. So, my normal element has a default border radius of round. And here we have our corner shape of scoop. So they kind of almost nestle inside of each other like this, which gives us a really cool effect on our element. And again, we can modify or change that however we want, but allows us to essentially slot different elements into really cool looking design that without this is very, very difficult to do in CSS, especially when you want to have a transparent background. For example, if I change my body background to be a different color, so I just come in here and I say my background is actually going to be yellow. You can see that yellow shows up between the green and the black. I could change it to blue and that's still going to show up between there. Getting that background to show up in that transparent section is incredibly difficult to do without this CSS property. So, it's so nice that we actually have this in place. Now, another thing we can do is we can actually create kind of speech bubble style effects. So, let me copy over the code for our speech bubble example so we can see what's looking like here. And this one is a little bit more complex, but I'll explain what's going on. We just have a basic element. In our case, 300x 100 pixels. And you can see here we have a standard 10 pixel border. And then for our border, we're actually specifically setting a kind of interesting border. So our left border and our right border on the bottom are set to 100% and 50%. This 100% value essentially says how far we want to curve this way horizontally. So if I change this to like 50%, you can see it's only curving 50% of the way to the middle because it's only the left hand side. And if I do it to 100%, you can see it's curving all the way to the very end of our border. This 50 pixels right here determines our vertical orientation. So, if I just change this to zero, you can kind of see it stops right there. If I change it to 100% instead, you can see we get the full scoop. But, by just changing it to like a value of, let's say, 50 pixels or so, you can see it kind of just scoops and points down as if it's pointing at an element directly below it. You can do the exact reverse on the right side as well. So, it's exactly the same. It's going 100% from the right and then 50 pixels down. And to be able to get this kind of scooping shape, all I did is use a super ellipse of - 1.5. And you can set the corner shape to square on everything else, but since I don't have a border radius on anything else, that's not even needed. And I can modify this however I want. For example, I could change it to -2.5 to see if I like that effect better. Or maybe I could change it to.5 and I can see, oh, do I like that effect better? And I can really fine-tune exactly what I want to do with this. But this is just another example of one of the really cool things you can do with this property. Now, just another example of something really cool that you can do with this. I just kind of have this random funky shape here. So, we'll paste this one in as well. And you can see this one just kind of has a random weird shape to it. And the way that I'm getting such an interesting looking shape is actually by rotating it 45 degrees. If I remove my rotate, you can kind of now see the box shape of this element. And you can actually see kind of how my borders are set up. You can see here I have just a normal border radius in this top left. In my top right and my bottom left, I have a scoop border radius going on. And in the bottom right, I essentially have this bevel, which is a straight line going across. And you can see I'm actually using the special shortorthhorand for a corner shape that allows me to define these different elements because I can define all the elements to be the same. I can do top and bottom to be different. I can do or top and top and bottom and left and right to be different. Or I can do in this case where I have different ones being different. So you can really fine-tune how you want to do this. Generally I like to write out the full version of it as opposed to the shorthand because the shorthand's harder to read. But it's entirely up to you. As you can see, you can make some really interesting shapes with this. Now, the one big downside to this property is like all new CSS properties, the browser support is not great. Right now, it's only at 66%. And that's mostly because Safari and Firefox don't have any support. And that includes Safari on iOS. So, that means all of your mobile iPhone users as well as your Mac users and anyone using Firefox do not have access to this, which is a huge downside to it. But since this is mostly just an aesthetic feature that you're going to add on your site for some additional flare or style, it's something that you can actually feel comfortable using in your site as long as the implementation of it is not critical to the visuals of the site. If you're just using it to create slightly fancier borders or slightly more visually appealing things, it's perfectly fine to use and it'll just fall back to whatever the normal shape is going to be if your browser does not support this. So, in most cases, you can pretty much get away with using this, but for some very specific things, you will just have to either use a workaround or wait until it's actually available in all browsers. Now, if you want to check out some of my more bleeding edge CSS style videos, I'm going to link a bunch of them right over here. And with that said, thank you very much for watching and have a good