When I use background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)) center / 100% 3px no-repeat it works but when I use border: 0px 2px 0px 0px solid LightGrey it doesn't and shows an error. Both "100% 3px" and "0px 2px 0px 0px" are multiple values for a single property but only the first case works correctly.
Why is this the case and is there a way I'm missing to make it work in the second instance?
When I use background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)) center / 100% 3px no-repeat it works but when I use border: 0px 2px 0px 0px solid LightGrey it doesn't and shows an error. Both "100% 3px" and "0px 2px 0px 0px" are multiple values for a single property but only the first case works correctly.
Why is this the case and is there a way I'm missing to make it work in the second instance?
Share Improve this question asked Feb 16 at 16:24 PromZAPromZA 51 silver badge8 bronze badges 2- Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Bot Commented Feb 16 at 21:19
- The bot seems to be malfunctioning. It should be rather clear what I was asking, only it doesn't seem to exist. – PromZA Commented Feb 16 at 22:19
1 Answer
Reset to default 1The documentation mentions that only 3 values are supported. This is likely to prevent ambiguity in values.
While the logical leap you made to assume the shorthand should work is understandable, please remember different properties have differing logic and syntax should not be assumed.
From the description in the docs :
The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width, border-style, and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start) border properties.
Therefore, you need to specify width explicitly:
border: solid LightGrey;
border-right-width: 2px;