[BUG] CSS `border-top-color` acts the same as `border-color`

Photoshop
, ,
4

I’ll note that you can use :after and :before to fake extra borders (as long as you don’t need more than two additional colors).

For example:

.hi {
    width: 50px;
    height: 50px;
    position: relative;
    border: 10px solid green;
}
.hi:after {
    content: '';
    border-right: 10px solid blue;
    position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
}
.hi:before {
    content: '';
    border-top: 10px solid red;
    position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
}

yields:

image

1 Like