CSS

Multiple borders with CSS – simple and fast

July 15, 2021

Multiple borders with CSS – simple and fast

A very interesting and little explored feature is creating multiple borders with CSS, in this post, I’ll show you the possibilities and details that we can create with this technique.

Multiple borders with CSS cover

Theory of multiple border with CSS

We will use a pseudo-element to make this effect, so some cautions are important

The element that will have multiple borders must have its own border and also have a position relative.

Another important point is that this technique can be used both to insert outer and inner edges in the element.

And then as I said earlier from the second edge, the edges will be added with pseudo-elements and a negative z-index.

This is necessary so that the content within the main element is not harmed, so we can click on a link within it, for example.

In addition, we will have to add an empty content, and also position the element absolutely on the element that is positioned with relative.

Another important point is to be careful with the other elements that have a z-index on the page, as it can generate a visual aberration if they overlap or get confused with the elements with multiple borders 😀

So enough of theory, and let’s practice?

Multiple borders in practice

So let’s see the result of this HTML and CSS

<div class="multiple-borders1"></div>
.multiple-borders1 {
     position:relative;
     border: 5px solid #44CF6C;
     width: 100px;
     height: 100px;
}

/* border inward */
.multiple-borders1:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0px;
     left: 0px;
     right: 0px;
     bottom: 0px;
     border: 5px solid #32A287;
}

/* border out */
.multiple-borders1:after {
     content: "";
     position: absolute;
     z-index: -1;
     top: -10px;
     left: -10px;
     right: -10px;
     bottom: -10px;
     border: 5px solid #A9FDAC;
}

Result:

Imagem

Note that the HTML is very simple, just a div so we can add the relative position, the border, and also measures, exactly as explained above.

So we add two borders with :after and :before, one inside and one outside the element.

Bonus: blur effect with multiple edges

There is also another possibility, which is to replicate the leading edge with different intensities, generating a cool effect

For this, we will use the box-shadow, which will allow us infinite borders

<div class="multiple-borders2">
</div>
.multiple-borders2 {
     position:relative;
     border: 5px solid #44CF6C;
     width: 100px;
     height: 100px;
     top margin: 100px;
     margin-left: 100px;
     box-shadow:
       0 0 0 10px rgba(68, 207, 108, 0.9),
       0 0 0 15px rgba(68, 207, 108, 0.7),
       0 0 0 20px rgba(68, 207, 108, 0.5),
       0 0 0 25px rgba(68, 207, 108, 0.3),
       0 0 0 30px rgba(68, 207, 108, 0.1);
}

Final result:

Imagem

Conclusion

We saw in this post two possibilities to add multiple borders with CSS

The first was with the pseudo-elements in :after and :before

The second one uses the box-shadow to achieve a gradient effect on the element, easier just replicating the border several times with different intensities from the rgba.

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

Also, check out our free HTML and CSS course on YouTube by clicking here

Where we create a website from 0 to responsive 😀

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x