Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts

    Color Changing Border-Color

    I noticed that color: ; also changes the border-color. I've always thought it was a nuisance, but now I'm thinking about using it to my advantage.

    I was wondering if color changes border-color for all browsers? and why?

  • #2
    Regular Coder
    Join Date
    Jan 2012
    Posts
    134
    Thanks
    0
    Thanked 32 Times in 32 Posts
    Here's an interesting blog post about it: http://www.impressivewebs.com/css-color-property/.

    I can confirm that something like this works in IE6, IE9 Chrome and FF6:

    Code:
    <div style="border: solid 2px; color: red;">test</div>

  • Users who have thanked KuriosJon for this post:

    Sammy12 (01-28-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Philippines
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's really weird because the "color" tag only changes the font color,

    It is the "border" tag you need to change border colors.

    Cheers!

    Arman

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    I have never known this, however, I always specify a colour in my border tag

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Kurios that is an absolutely excellent article. Where did you get the browser statistics? Is it possible this works in IE6, Chrome, FF3, S4, O10? If it doesn't then there isn't much use for it, seeing as the advantage is only minor.

  • #6
    Regular Coder
    Join Date
    Jan 2012
    Posts
    134
    Thanks
    0
    Thanked 32 Times in 32 Posts
    My gut feeling is that this is an actual CSS 2 specification, so all browsers probably follow this pattern. The browsers I listed were the ones I happen to be running, so I tried it in them.

    If you want to try it, throw up a demo page and see what http://browsershots.org/ spits out. I haven't used that site in ages, but it looks like it still works.

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    lol it's no coincidence browsershots abbreviation is "bs". Too slow for my taste, I'm going to use this anyways seeing that it is css2 and most likely supported in every browser even < ie5

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Sammy12 View Post
    I was wondering if color changes border-color for all browsers? and why?
    This behavior is mandated by the CSS2.1 spec:

    Quote Originally Posted by CSS2.1
    If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.
    CSS3 Color defined this behavior more explicitly with a keyword:

    Quote Originally Posted by CSS3 Color
    CSS1 and CSS2 defined the initial value of the ‘border-color’ property to be "the value of the ‘color’ property" but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the ‘currentColor’ value for the ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, and ‘lighting-color’ properties. CSS3 extends the color value to include the ‘currentColor’ keyword to allow its use with all properties that accept a <color> value.
    Therefore, the default value for the border-color property is currentColor.

    According to caniuse.com, CSS3 Color is supported in the latest release of every browser.


    Quote Originally Posted by leanocodes View Post
    That's really weird because the "color" tag only changes the font color,
    In CSS, border is a property (not a "tag").

    Quote Originally Posted by melloorr View Post
    I have never known this, however, I always specify a colour in my border tag
    In CSS, a property-value combination is a declaration (not a "tag").
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •