CODEWITHSUNDEEP
cssshorthand
PromZA
PromZA

Reputation: 5

Confused over multiple values not working in shorthand property

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?

Upvotes: 0

Views: 43

Answers (1)

Frox
Frox

Reputation: 191

The 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;

Upvotes: 1

Related Questions