Not much to explain 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
That’s disappointing But if it’s by design, I guess your answer can be marked as a solution
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:
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
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’ll note that box-sizing: border-box
is the only box sizing model that UXP understands.
2 Likes