Open fantasai opened 2 months ago
I think having to specify transparent
is fine. I wouldn't expect a background to affect a border.
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.
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
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".
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
@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.
This is a good idea.
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;
.
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.
The initial value of
border-color
iscurrentColor
, which matches the text.We recently added a
border-area
value tobackground-clip
which allows authors to create interesting image borders. They almost always need to setborder-color: transparent
together with this value.Should we make the initial value of
border-color
automatically compute totransparent
whenborder-area
is present inbackground-clip
?