New CSS corner-shape Property Is Amazing

The brand new corner shape property in CSS is amazing. By default, it's round, which just gives you a normal rounded border radius corner, but you can do so much with this. For example, scoop gives you an inverse border radius. You can use notch to essentially give you a fully squared off border radius cutting inward. You can use square to essentially remove your border radius. You can also use squirle. This gives you a kind of extra rounded, not quite as super round version as you would get before. And you can even use bevel to give you straight lines for your border radius. And the really great thing is you can actually customize this even further by using the super ellipse function and passing in the value you want for what you want your shape to look like. So if we pass in a value of one, that gives you a normal border radius. While a value of negative 1, that's going to give you that scooped version. And if you go greater than negative 1, you can see it starts to scoop in further and further until you almost get to that full on notch behavior. And as you increase this number more and more, you start to again get less and less rounded until you eventually get to a practically square border shape. And zero gives you that perfect 45° angle. And this can be animated between and customized however you want to give you the exact border shape you need instead of just a perfectly round corner. If you want to see some of the amazing stuff you can do with this property, I'll link a full video at the bottom of your screen for you that covers this property in depth and gives lots of really cool examples.