[css-backgrounds-4][css-borders-4] Should initial value of border-color be sensitive to border-area?

[fantasai]

The initial value of border-color is currentColor, which matches the text.

We recently added a border-area value to background-clip which allows authors to create interesting image borders. They almost always need to set border-color: transparent together with this value.

Should we make the initial value of border-color automatically compute to transparent when border-area is present in background-clip?

[Loirooriol]

I think having to specify transparent is fine. I wouldn't expect a background to affect a border.

[jsnkuhn]

I kind of like this idea to make background-clip: border-area; easier to work with but since text doesn't similarly automatically change the color to transparent when used there would be an inconsistency.

[jsnkuhn]

also occurs to me that if you are wanting to put a translucent color overly on just the border-area like folks currently do with background images, using the border-color: rgb(0 0 0 / .2); for this would be easier than adding an extra background-image with border-area

[jsnkuhn]

another possibility for wanting to use border-color with border-area is a having a default solid border color and then a change to transparent on hover to show a border-area gradient/image beneath it. This would again be less of a hassle than using 2 border-area layers for the 2 "borders".

[jsnkuhn]

FYI, the other property reset i've used every time with border-area is background-origin: border-box;. Considering resetting border-box as an initial background-origin value might be of use as well since im my experience most devs are not familiar with that property.

https://codepen.io/jsnkuhn/pen/eYwoGgr?editors=1100 https://codepen.io/jsnkuhn/pen/LYKXGPo https://codepen.io/jsnkuhn/pen/WNqaeOV https://codepen.io/jsnkuhn/pen/OJeoapM

[fantasai]

@jsnkuhn Thanks for the input! I pulled your last comment into a separate issue: https://github.com/w3c/csswg-drafts/issues/11167

Just to be clear, the idea in this issue is just to change the initial value -- if you set a color explicitly, we'd of course honor it.

[jensimmons]

This is a good idea.

[tabatkins]

I'm weakly against this; I agree with @Loirooriol that I wouldn't expect 'background' to effect 'border', and with @jsnkuhn that we don't do a similar thing with 'text' and 'color' either, so it would be odd to do it just for this case. It also would feel weird that border styles which do show the background underneath them, like dashed or dotted, would also become invisible unless you remembered to manually set the color.

The saved effort also seems absolutely minimal. In order to set up a border area, you already have to set both the border width and the border style (since the initial value of 'border-style' is 'none', which suppresses the border entirely), so you're probably using the 'border' shorthand anyway. Setting the color to transparent at the same time is no effort, just border: 5px solid transparent; vs border: 5px solid;.

[jsnkuhn]

Changing to initial color: transparent; makes more sense with the background-clip: border-area text; value as you'd have to reset both the font color and the border color anyway. But for text we don't have a way to just reset "font-color" alone so there would be the unintended consequence of affecting the default border color if it were even possible to go back and change this at this point.