How to create fancy corners with CSS
Tags: css, tutorial
Published: 2020-05-03 17:08:20

---
title: How to create fancy corners with CSS
published: true
date: 2020-04-07 13:00:33 UTC
tags: css,tutorial
canonical_url: https://blog.logrocket.com/how-to-create-fancy-corners-in-css/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/w99kz1llxuedygh57rak.png
---
**Written by [Supun Kavinda](https://blog.logrocket.com/author/supunkavinda/)**✏️

CSS can do amazing things. Creating fancy corners is one of them. With a just few lines of CSS code, you can easily beautify the corners of HTML elements and create stunning visuals for users to interact with.

In this tutorial, we’ll first demonstrate how to create rounded corners and then show how you can apply these concepts to create your own designs — what I like to call fancy corners.

![Five Types of Fancy Corners in CSS](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/five-types-fancy-corners-1.png?resize=720%2C126&ssl=1)

To start, let’s create a simple box centered in the `<body>` so we can experiment with its corners.

```jsx
<body>
  <div></div>
</body>


body {
  display:flex;
  height:100vh;
  align-items:center;
  justify-content: center;
  background-color: #e7d39f;
}
div {
  width: 200px;
  height: 80px;
  background-color: #522d5b;
}
```

![Box Element](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/initial-box-element.png?resize=607%2C243&ssl=1)

Now we’ll use this box as a model to build five types of fancy corners: rounded, notched, scooped, inverted, and random. Let’s get started!

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## 1. Rounded corners

[`border-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) is the fundamental CSS property to create rounded corners. You may have already used it. Here’s an overview of the property:

```jsx
/* sets radius of all 4 corners */
border-radius: 10px;

/* top-left top-right bottom-right bottom-left */
border-radius: 10px 15px 15px 10px;
```

You can use `border-radius` directly to create rounded corners.

```jsx
div {
  border-radius:15px;
}
```

![Box With Four Rounded Corners](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/rounded-corners-all-four.png?resize=347%2C136&ssl=1)

You can also set different values to each corner.

```jsx
div {
  border-radius:5px 30px 30px 5px;
}
```

![Box With Rounded Corners of Different Values](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/rounded-corners-different-values.png?resize=308%2C151&ssl=1)

If you only want one corner to be rounded, for example, you can set one of the following CSS properties.

```jsx
div {
  border-top-left-radius:15px;
  /* or
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
  border-bottom-left-radius:15px;
  */
}
```

![Box With Rounded Corners on One Side](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/rounded-corners-one-side.png?resize=290%2C132&ssl=1)

What about a circle? User avatars, for instance, are often displayed within circles. You’ll first need to create a square to make a perfect circle.

```jsx
div {
  width:100px; /* overriding previous values */
  height:100px;
  border-radius: 50%; /* here's the trick */
}
```

![Box With Corners Rounded to Create a Circle](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/rounded-corners-circle.png?resize=257%2C162&ssl=1)

## 2. Notched corners

Going beyond the `border-radius` property, you can utilize pseudo-elements such as the `box-shadow` property to create different types of corners.

When using this method, you can only change one side of the box. You’ll see why.

Here’s the CSS of the box:

```jsx
div {
  position:relative; /* this one is new - used to contain absolute elements */
  width: 200px;
  height: 80px;
  background-color: #522d5b;
}
```

Next, use the `:after` pseudo-element to create a border.

```jsx
div:after {
  content: "";
  position:absolute;
  margin:-20px;
  width:40px;
  height:40px;
  transform:rotate(45deg);
  background-color:#000; /* to see where it is */
}
```

![Creating Notched Corners](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/notched-corners-box-pseudo-element.png?resize=324%2C148&ssl=1)

Set `overflow:hidden` on the box to hide the overflowed parts of its child elements.

```jsx
div {
  /* other styles */
  overflow:hidden;
}
```

Now for the most interesting part: using `box-shadow` to fill the background.

```jsx
div:after {
  /* other styles */
  box-shadow: 0 0 0 250px #522d5b;
}
```

Here we created a large shadow around the psuedo-element without any blur (second `0` parameter), so we get an enlarged copy of the element around it. Thanks to the `overflow:hidden` in the box, anything outside of it is hidden. You should get something like this:

![Notched Corners Created With box-shadow](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/notched-corners-box-shadow.png?resize=325%2C148&ssl=1)

Finally, remove the background colors from the box and pseudo-elements. The background color is set in the `box-shadow` property (`#522d5b` in our case).

![Box With One Notched Corner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/notched-corner-complete.png?resize=356%2C164&ssl=1)

You’ll notice that you’re limited to one corner with this method. How do you notch all four corners? There are two methods:

1. Use [SVG](https://blog.logrocket.com/animating-svg-with-css-83e8e27d739c/), which is not within the scope of this article
2. Use `clip-path`, which is easy but has less browser support

### Creating nootched corners with `clip-path`

The `clip-path` property determines what region to show in an element. You can use it with the `polygon()` function to create a notched corner (or anything else with complex values).

```jsx
div {
  position:relative;
  width: 100px;
  height: 100px;
  overflow:hidden;
  background: #522d5b;
  clip-path: polygon(
    0 10%,
    10% 0,
    90% 0,
    100% 10%,
    100% 90%,
    90% 100%,
    10% 100%,
    0% 90%,
    0% 10%
  )
}
```

![Box With Four Notched Corners Made With clip-path](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/notched-corners-clip-path.png?resize=285%2C144&ssl=1)

Instead of repeating the same percentages, you can either use [CSS variables](https://dev.to/bnevilleoneill/how-to-use-css-variables-like-a-pro-4c78) or [SCSS](https://dev.to/bnevilleoneill/the-definitive-guide-to-scss-1ign) variables.

## 3. Scooped corners

Creating scooped corners is similar to creating notched coners. Instead of using a rotated sqaure as the pseudo-element, you can use a circle.

```jsx
div:after {
  content: "";
  position:absolute;
  margin:-20px;
  width:40px;
  height:40px;
  border-radius: 50%; /* NEW */
  box-shadow: 0 0 0 250px #522d5b;
}
```

![Box With Scooped Corner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/scooped-corner-complete.png?resize=283%2C136&ssl=1)

However, if you need to scoop all four corners, your best bet is to [use SVG](https://css-tricks.com/scooped-corners-in-2018/#svg-flexible-and-good-browser-support).

## 4. Inverted corners

You can use the same method again, with a few tweaks.

To create the box:

```jsx
div {
  position:relative;
  width: 200px;
  height: 80px;
  background: #522d5b;
}
```

To create the psuedo-element:

```jsx
div:before {
  content: "";
  position:absolute;
  top:-40px;
  left:0;
  height:40px;
  width: 40px;
  border-bottom-left-radius: 50%;
  background:#000;
}
```

![Inverted Corner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/inverted-corners-pseudo-element.png?resize=294%2C168&ssl=1)

The next step is to fill the small part between the pseudo-element and remove the background color. We can use the `box-shadow` property to do that.

```jsx
div:before {
   box-shadow: 0 20px 0 0 #522d5b;
}
```

In `box-shadow`, we set `x`, `spread`, and `blur` to zero and `y` to `20px` (half of the height). Therefore, the box shadow is a copy of the pseudo-element shown below it. When using the same color for `box-shadow` as the box, the access part hides.

![Box With Scooped Corner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/scooped-corner-complete.png?resize=283%2C136&ssl=1)

This type of design is perfect for speech bubbles.

![Scooped Corner Stylized as a Speech Bubble](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/scooped-corner-speech-bubble.png?resize=340%2C170&ssl=1)

## 5. Random corners

Did you know that you can create interesting shapes like guitar picks and organic cells with nothing more than `border-radius`?

`border-radius` supports eight values seperated by a slash. According to [W3C](https://www.w3.org/TR/css-backgrounds-3/#border-radius):

> If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.

Start by creating a simple square.

```jsx
div {
  position:relative;
  width: 150px;
  height: 150px;
  background: #522d5b;
}
```

The easiest way to create a random corner is to use four values.

```jsx
div {
  border-radius: 60% 40% 40% 20%;
}
```

![Element With Random Corners of Four Values](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/random-corners-four-values.png?resize=311%2C237&ssl=1)

In this example, you can see that all the corners have the same roundness across the vertical and horizontal axes. There are eight values in `border-radius` you can use to change it.

```jsx
div {
  border-radius: 60% 40% 40% 20% / 70% 50% 30% 25%;
}
```

![Element With Random Corners of Eight Values](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/random-corners-eight-values.png?resize=274%2C220&ssl=1)

This lesser-know feature is very effective in creating beautiful corners. If you’re bored and feel like playing with the values to create random corners, try messing around with [this visual tool](https://9elements.github.io/fancy-border-radius/).

## Conclusion

As you can see, it’s possible to create all kinds of interesting corners — from simple rounded ones to snazzy, random designs — using nothing more than `border-radius`, `box-shadow`, and pseudo-elements. You can take the basic tools you learned today and evolve your skills to create awesome, unique designs, especially for your next landing page project.

What’s your favorite type of fancy corner?

* * *
## Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, [try LogRocket.](https://logrocket.com/signup/) 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/403rye2ptzx994uhktk1.png)

[LogRocket](https://logrocket.com/signup/) is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — [Start monitoring for free.](https://logrocket.com/signup/)
* * *

The post [How to create fancy corners with CSS](https://blog.logrocket.com/how-to-create-fancy-corners-in-css/) appeared first on [LogRocket Blog](https://blog.logrocket.com).