A Look Into: CSS Border Corner Shape

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

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?

Thing to Note

Sadly, as I said earlier, the border-corner-shape property is experimental, and has not been implemented in any of the current browsers. So, it is not (yet) applicable. But, you can preview the demo, and play with the property syntax from this app, created by Lea Verou.

What do you thing of this CSS feature? Do you want to see it implemented in the future? Are there any cases that this property can be very useful? Share your thoughts in the comment box below.