A Guide to: CSS Border Corner Shape

By . in Coding. Updated on .

With the advent of CSS3, we’ve seen a plethora of new features like Rounded Corners, Box Shadows, and Text Shadows. However, some features are still in the experimental stage. One such feature is Border Corner Shape.

This feature takes corner manipulation to the next level. While border-radius allows us to create rounded corners, Border Corner Shape introduces more intricate designs like beveled, scoop-style, and rectangle-notch corners.

Getting Started with Border Corner Shape

The property border-corner-shape is used to define the corner shape. Currently, it supports four predefined shapes: curve, scoop, bevel, and notch. Additionally, it’s suggested to use cubic-bezier for custom shapes (read the proposal).

It’s important to note that border-corner-shape only sets the shape, while the size of the shape is determined by the border-radius property. Both properties should be used together to achieve the desired result.

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

The above code snippet will produce a result similar to the image below:

Scoop-shaped border corner

Another Example

For this example, we’ll set the corner shape to bevel and adjust the border radius to 50% for all corners except the bottom right.

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

The code above will yield the following visual output:

Bevel-shaped border corner

Isn’t it intriguing how much you can do with CSS Border Corner Shapes?

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail