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

, ,

Not much to explain :thinking: Can’t set only top border color - all four borders are affected
Actually none of these work - color is set on all four borders:

border-color: blue transparent transparent transparent;
border-color: transparent transparent blue transparent;
border-right-color: blue;

API v2, Ps v23, Win10

UXP only supports a single border color per element. See https://www.adobe.io/photoshop/uxp/uxp/reference-css/Styles/border-color/#quirks-and-exceptions.

That’s disappointing :frowning: But if it’s by design, I guess your answer can be marked as a solution :slight_smile:

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

My use case - want to have only the top border appear on hover, without changing element dimensions. So I had transparent borders and on hover wanted to change only top color, on active additionally left and right :thinking:

You can use box-sizing:border-box to keep the dimensions of your element when adding a border.
This might shift the content inside around though, so if you don’t want that you’d have to use the ::after / ::before workaround.
Here’s a demo: Edit fiddle - JSFiddle - Code Playground

But I do have content inside, so border-box doesn’t really work for me. Also, as far as my knowledge goes, ::before/::after would let you add only two borders, right?

Yes, but you can stack as many elements on top of each other as you want, using absolute positioning:
https://jsfiddle.net/b16qw2yu/

I really appreciate the effort, but I don’t think it’s worth cluttering the DOM just because of a couple of borders colors :slight_smile: I’ll just keep my plugin appearance not as I wanted it to be, but it won’t be bad in any way :slight_smile: It’s just that it could be better :smiley:

I’ll note that box-sizing: border-box is the only box sizing model that UXP understands.

2 Likes