mozilla
Your Search Results

    border-color

    Summary

    The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color

    • Initial value the concatenation of the initial values of its longhand properties:
      • border-top-color: currentColor
      • border-right-color: currentColor
      • border-bottom-color: currentColor
      • border-left-color: currentColor
    • Applies to all elements. It also applies to ::first-letter.
    • Inherited no
    • Media visual
    • Computed value as each of the properties of the shorthand:
      • border-bottom-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
      • border-left-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
      • border-right-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
      • border-top-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
    • Animatable as each of the properties of the shorthand:
      • border-bottom-color: yes, as a color
      • border-left-color: yes, as a color
      • border-right-color: yes, as a color
      • border-top-color: yes, as a color
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    /* border-color: color */ 
    border-color: red;
    
    /* border-color: horizontal vertical */
    border-color: red #f015ca;
    
    /* border-color: top vertical bottom */
    border-color: red yellow green;
    
    /* border-color: top right bottom left */
    border-color: red yellow green blue;
    
    border-color: inherit
    

    Values

    color
    Is a  <color> denoting the color to apply to all four edges. It is used only in the one-value syntax.
    horizontal
    Is a  <color> denoting the color to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.
    vertical
    Is a  <color> denoting the color to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
    top
    Is a  <color> denoting the color to apply to the top edge. It is used only in the three- and four-value syntaxes.
    bottom
    Is a  <color> denoting the color to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
    right
    Is a  <color> denoting the color to apply to the top edge. It is used only in the four-value syntax.
    left
    Is a  <color> denoting the color to apply to the top edge. It is used only in the four-value syntax.
    inherit
    Is a keyword indicating that all four values are inherited from their parent's element calculated value.

    Formal syntax

    <color>{1,4}

    Examples

    Complete border-color usage

    HTML Content

    <div id="justone">
        <p><code>border-color: red;</code> is equivalent to</p>
        <ul><li><code>border-top-color: red;</code></li>
           <li><code>border-right-color: red;</code></li>
           <li><code>border-bottom-color: red;</code></li>
           <li><code>border-left-color: red;</code></li>
        </ul>
    </div>
    <div id="horzvert">
        <p><code>border-color: gold red;</code> is equivalent to</p>
        <ul><li><code>border-top-color: gold;</code></li>
           <li><code>border-right-color: red;</code></li>
           <li><code>border-bottom-color: gold;</code></li>
           <li><code>border-left-color: red;</code></li>
        </ul>
    </div>
    <div id="topvertbott">
        <p><code>border-color: red cyan gold;</code> is equivalent to</p>
        <ul><li><code>border-top-color: red;</code></li>
            <li><code>border-right-color: cyan;</code></li>
            <li><code>border-bottom-color: gold;</code></li>
            <li><code>border-left-color: cyan;</code></li>
        </ul>
    </div>
    <div id="trbl">
        <p><code>border-color: cyan black gold;</code> is equivalent to</p>
        <ul><li><code>border-top-color: red;</code></li>
            <li><code>border-right-color: cyan;</code></li>
            <li><code>border-bottom-color: black;</code></li>
            <li><code>border-left-color: gold;</code></li>
        </ul>
    </div>
    

    CSS Content

    #justone {
        border-color: red;
    }
    #horzvert {
        border-color: gold red;
    }
    #topvertbott {
        border-color: red cyan gold;
    }
    #trbl {
        border-color: red cyan black gold;
    }
    
    /* Set width and style for all divs */
    div {
        border: solid 0.3em;
        width: auto;
        margin: 0.5em;
        padding: 0.5em;
    }
    ul {
        margin: 0;
        list-style: none;
    }
    

    Result

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'border-color' in that specification.
    Candidate Recommendation The transparent keyword has been removed as it is now a part of the <color> data type.
    CSS Level 2 (Revision 1)
    The definition of 'border-color' in that specification.
    Recommendation The property is now a shorthand property
    CSS Level 1
    The definition of 'border-color' in that specification.
    Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) [1] 4.0 3.5 1.0 (85)
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 4.0 1.0 (1.9.2) [1] 7.0 11 1.0

    [1] The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox. -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors

    See also