Understand CSS Border Corner Shape

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).

It is worth noting that the border-corner-shape only declares the shape, while the length of the shape is specified using the border-radius property. So, to be able to see the result, when forming the shape these two properties should be declared together.

.box {
	background-color: #3498DB;
	border-corner-shape: scoop;
	border-radius: 30px;
	width: 200px;
	height: 200px;
}

Given the example of the above style rules, we will get a result as shown in the following screenshot.

Let’s take a look at one more example. This time we specify the corner shape to bevel, and set the border radius for 50% except in the bottom right corner, as follows.

.box {
	background-color: #3498DB;
	border-corner-shape: bevel;
	border-radius: 50% 50% 0% 50%;
	width: 200px;
	height: 200px;
}

The above style rules will give us the following result.

It is quite fascinating, isn’t it?