We have been seeing several new CSS3 features that are widely implemented, such as Rounded Corner, Box Shadow, and Text Shadow, just to name a few. Still, there are several features that are experimental, such as what we are going to discuss in this post: Border Corner Shape.
Border Corner Shape allows us to manipulate element corners further. While we can create rounded corners by using border-radius, the Border Corner Shape allows us to form beveled corners, scoop-style corners, and rectangle-notch corners.
How to Use it
We use border-corner-shape to define the shape. At the time of the writing, it accepts four predefined shapes with the following values: curve, scoop, bevel, and notch – it is also proposed that we use cubic-bezier for forming custom shape (see the proposal here).
