Search code examples
cssborder-spacing

CSS border-spacing property shorthand

It seems to me like the two item standard for most CSS properties is "top/bottom, left/right". At least, that's the case for everything I know of except border-spacing.

Is the "left/right, top/bottom" shorthand for border-spacing intentional? It gets me every time, and perhaps w3 didn't notice it was inconsistent.

Solution

  • This is a little different because unlike things such as border-width or margin, only two values are accepted:

    border-width: 10px 50px 10px 50px; /* valid */
border-spacing: 10px 50px 10px 50px; /* invalid */

    You can probably chalk it up to this difference.

    Whenever you see this shorthand for other properties that accept (up to) 4 values:

    border-width: 10px 50px;

    It just means that the bottom and left values are copied from the other side:

    border-width: 10px 50px 10px 50px;
/*            top  right btm left    */

    Or with three values:

    border-width: 10px 50px 20px;

    This is equal to:

    border-width: 10px 50px 20px 50px;