Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Strange behaviour with border-color and border shorthand

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #162724
    Rhys
    Participant

    Hi I have found some strange behaviour with border colors on the site I am working on.

    It seems using border shorthand without a color causes the browser to ignore a previously set border-color, instead overriding to a text color or browser default.

    See this codepen http://codepen.io/anon/pen/eLvmJ

    Am I doing something wrong with the shorthand? Is this intended

    In my site I would like to set the border-color seperate as this value will be shared with many objects. Should I just use the ‘longhand’ width and style?

    #162740
    Paulie_D
    Member

    That’s the default behaviour

    https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

    A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore:

    background-color: red;
    background: url(images/bg.gif) no-repeat top right;
    

    will not set the color of the background to red but to background-color’s default, transparent, as the second rule has precedence.

    #162755
    Rhys
    Participant

    Hmm that is kinda odd and unlike any other CSS behaviour I understand. I guess it’s handy when using backgrounds and similar.

    Shame there is no ‘unspecified’ or ‘pass’ value you can enter to maintain previously set longhand. That would be useful for other cases too, like setting only left+right padding in one line (something like padding: pass 20px )

    Thanks for the reply.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.