Supun Kavinda I started as a self-taught PHP developer before creating my own company, Hyvor. I am particularly interested in physics and machine learning.

How to create fancy corners with CSS

3 min read 1028

How to create fancy corners in CSS

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

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

<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

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!

1. Rounded corners

border-radius is the fundamental CSS property to create rounded corners. You may have already used it. Here’s an overview of the property:

/* 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.

div {
  border-radius:15px;
}

Box With Four Rounded Corners

You can also set different values to each corner.

We made a custom demo for .
No really. Click here to check it out.

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

Box With Rounded Corners of Different Values

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

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

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.

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

Box With Corners Rounded to Create a Circle

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:

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.

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

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

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

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

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

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

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

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

Instead of repeating the same percentages, you can either use CSS variables or SCSS 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.

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

However, if you need to scoop all four corners, your best bet is to use SVG.

4. Inverted corners

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

To create the box:

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

To create the psuedo-element:

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

Inverted Corner

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.

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

This type of design is perfect for speech bubbles.

Scooped Corner Stylized as a Speech Bubble

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:

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.

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

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

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

Element With Random Corners of Four Values

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.

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

Element With Random Corners of Eight Values

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.

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?

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    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/

    LogRocket 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 — .

    Supun Kavinda I started as a self-taught PHP developer before creating my own company, Hyvor. I am particularly interested in physics and machine learning.

    One Reply to “How to create fancy corners with CSS”

    Leave a Reply