Stacking/nesting CSS borders one on top of another?

HTML & CSS
1

Is this possible to do?

Also, without using box-shadow.

Square box:


Width: 170px
Height: 170px

.class {
border: 5px solid orange;
border: 5px solid black;
border: 5px solid blue;
border: 5px solid orange;
border: 5px solid black;
border: 5px solid blue;
border: 5px solid orange;
border: 5px solid black;
border: 5px solid blue;
border: 5px solid orange;
border: 5px solid black;
border: 5px solid blue;
border: 5px solid orange;
border: 5px solid black;
border: 5px solid blue;
border: 5px solid orange;
}
2

What happens when you try it?

2 Likes
3

It’s not possible to do.

4

Why not? It works perfectly.

Unless you explain the reasons that you only want to use borders then we can’t really help with what you want to achieve. You can only have the limited defined border styles on an element but you can have unlimited box shadows which creates the same effect.

2 Likes
5

No. It would be like using one of them, but changing the color several times, and seeing different colors on that border. Try using many DIV tags with different classes and border colors :slight_smile:

div {
border: 5px solid orange;
}

div.first {
border: 5px solid black;
}

div.second {
border: 5px solid blue;
}

div.third {
border: 5px solid orange;
}

And so on… as many as you want.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.