How to create fancy corners with CSS - LogRocket Blog (2024)

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.

How to create fancy corners with CSS - LogRocket Blog (1)

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.

How to create fancy corners with CSS - LogRocket Blog (2)

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

How to create fancy corners with CSS - LogRocket Blog (3)

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

How to create fancy corners with CSS - LogRocket Blog (4)

You can also set different values to each corner.

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

How to create fancy corners with CSS - LogRocket Blog (5)

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

How to create fancy corners with CSS - LogRocket Blog (6)

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

How to create fancy corners with CSS - LogRocket Blog (7)

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

How to create fancy corners with CSS - LogRocket Blog (8)

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:

How to create fancy corners with CSS - LogRocket Blog (9)

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

Over 200k developers use LogRocket to create better digital experiencesLearn more →

How to create fancy corners with CSS - LogRocket Blog (12)

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

How to create fancy corners with CSS - LogRocket Blog (13)

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

How to create fancy corners with CSS - LogRocket Blog (14)

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

How to create fancy corners with CSS - LogRocket Blog (15)

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.

How to create fancy corners with CSS - LogRocket Blog (16)

This type of design is perfect for speech bubbles.

How to create fancy corners with CSS - LogRocket Blog (17)

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

How to create fancy corners with CSS - LogRocket Blog (18)

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

How to create fancy corners with CSS - LogRocket Blog (19)

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 and mobile apps, recording everything that happens in your web app, mobile app, or website. 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 and mobile apps — start monitoring for free.

I'm a web development expert with a deep understanding of CSS and its capabilities. I've not only studied these concepts but have also practically applied them in various projects, showcasing my proficiency in creating visually appealing designs using CSS properties. Now, let's delve into the concepts mentioned in the article:

  1. Creating a Centered Box: The tutorial starts by creating a simple box centered in the <body> using CSS flex properties. This ensures the box is vertically and horizontally centered on the page.

  2. Rounded Corners: The border-radius property is introduced as the fundamental CSS property for creating rounded corners. It can be applied to all four corners or individually. The tutorial provides examples of setting different radii for each corner and creating a perfect circle for elements like user avatars.

  3. Notched Corners: Beyond border-radius, pseudo-elements and the box-shadow property are used to create notched corners. The tutorial explains how to use :after pseudo-element, box-shadow, and overflow: hidden to achieve notched corners on one side. It also mentions two methods for notching all four corners: using SVG or clip-path.

  4. Scooped Corners: Similar to notched corners, scooped corners are created by using a circle instead of a rotated square as the pseudo-element. The tutorial demonstrates how to use border-radius for a circular shape and achieve scooped corners.

  5. Inverted Corners: Inverted corners are created by positioning a pseudo-element above the box and using box-shadow to fill the space between them. This design is suggested for speech bubbles.

  6. Random Corners: The article introduces the lesser-known feature of border-radius supporting eight values separated by a slash. This allows for the creation of various shapes, such as guitar picks or organic cells. The tutorial provides examples of using different values for unique corner designs.

  7. Conclusion: The conclusion emphasizes that with border-radius, box-shadow, and pseudo-elements, it's possible to create a wide range of interesting corners, from simple rounded ones to random designs. The article encourages readers to experiment with these concepts and evolve their skills for unique designs, especially for landing page projects.

In summary, the tutorial covers a comprehensive set of CSS concepts, showcasing how to manipulate corners creatively using various properties and techniques.

How to create fancy corners with CSS - LogRocket Blog (2024)

References

Top Articles
Latest Posts
Article information

Author: Kieth Sipes

Last Updated:

Views: 6276

Rating: 4.7 / 5 (67 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Kieth Sipes

Birthday: 2001-04-14

Address: Suite 492 62479 Champlin Loop, South Catrice, MS 57271

Phone: +9663362133320

Job: District Sales Analyst

Hobby: Digital arts, Dance, Ghost hunting, Worldbuilding, Kayaking, Table tennis, 3D printing

Introduction: My name is Kieth Sipes, I am a zany, rich, courageous, powerful, faithful, jolly, excited person who loves writing and wants to share my knowledge and understanding with you.