How to make beveled borders with CSS

In this post we will see how too quickly and easily make beveled borders with CSS in an HTML element.

Theory of beveled borders with CSS

In a previous post, we saw how to make rounded images with CSS using borders, you can see here.

But for this technique, we will use a different CSS rule.

We are going to use the pseudo-elements of :after and :before with a touch of transform.

In pseudo-elements, we will have to add an absolute position and position them so that they are at the end of the main element.

And the main element must have relative positioning so that pseudo-elements can have it with reference and not another parent element with a defined position

And for those who don’t know: a beveled corner is when the corner of a square element is cut at its ends at a 45º angle, for example.

Let’s see in practice?

Beveled corner in practice

First, let’s see the necessary HTML and CSS codes and finally, the final result obtained.
HTML and CSS:

<!-- HTML -->
<div class="canto-chanfrado"></div>

/* CSS */
.canto-chanfrado {
    background-color: tomato;
    width: 200px;
    height: 200px;
    margin-left: 50px;
    margin-top: 50px;
    position: relative;
}

.canto-chanfrado::after,
.canto-chanfrado::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    background-color: #FFF;
}

.canto-chanfrado::after {
    left: -25px;
    transform: rotate(-45deg);
}

.canto-chanfrado::before {
    right: -25px;
    transform: rotate(-45deg);
}

Resultado final:

Well as we can see the HTML is very simple, we just added a div with a class.

Later in CSS, we added basic styles to this div like dimensions, placement, and background color.

And here comes the technique, we create pseudo-elements with dimensions, white background color and pre-positioned on top with half its size, so it will cut only half of the main div.

Then we changed each pseudo-element to position them one in each corner and thus complete the job, cool, right? 😀

Conclusion

We saw that to achieve this technique the main element, which will receive the cuts, must have a relative position.

And the pseudo-elements, :after and :before, must be placed absolutely at the corners of the parent element.

Also, note that this technique opens up a range of other possibilities for making geometric cutouts in an element 🙂

And that’s it for today, until the next post!

You can check our YouTube channel by clicking here!

beveled borders