4 October 2019,
 0
Organic Traffic

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.

bevelbevel

It is quite fascinating, isn’t it?

The post Understand CSS Border Corner Shape appeared first on Hongkiat.

Buy Organic Traffic

Leave a Reply

s2Member®