mozilla
Your Search Results

    border-color Redirect 1

    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
    • 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

    Formal syntax: <color>{1,4}
    border-color:  color                  /* one-value syntax */ 
    border-color:  horizontal vertical    /* two-value syntax */
    border-color:  top vertical bottom  /* three-value syntax */
    border-color:  top right bottom left  /* four-value syntax */
    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.

    Example for border-color and border-style

    HTML Content

    <div id="example_border_box">
    <p>This is a box with a border around it.</p>
    </div>
    

    CSS Content

    #example_border_box { 
      border-style: ridge dashed solid; 
      /* Equivalent to:
         border-top-style: ridge;
         border-right-style: dashed;
         border-bottom-style: solid;
         border-left-style: dashed;
      */
      border-color: orange blue; 
      /* Equivalent to:
         border-top-color: orange;
         border-right-color: blue;
         border-bottom-color: orange;
         border-left-color: blue;
      */
    }

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3 Candidate Recommendation The transparent keyword has been removed as it is now a part of the <color> data type.
    CSS Level 2 (Revision 1) Recommendation The property is now a shorthand property
    CSS Level 1 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 ? 1.0 (1.9.2) [1] ? ? ?

    [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

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar