Brian Neville-O'Neill

Posted on May 3, 2020 • Originally published at blog.logrocket.com on Apr 7, 2020

How to create fancy corners with CSS

#css #tutorial

Written by Supun Kavinda✏️

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.

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;
}

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;
}

You can also set different values to each corner.

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

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;
  */
}

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

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

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:

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

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

Use SVG, which is not within the scope of this article
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%
  )
}

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;
}

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;
}

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.

This type of design is perfect for speech bubbles.

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%;
}

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%;
}

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?

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.

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 — Start monitoring for free.

The post How to create fancy corners with CSS appeared first on LogRocket Blog.