Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    border-top-color

    Summary

    The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.

    • Initial value currentColor
    • Applies to all elements. It also applies to ::first-letter.
    • Inherited no
    • Media visual
    • Computed value 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 yes, as a color
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: <color>
    
    border-top-color: red;
    border-top-color: rgb(255, 128, 0);
    border-top-color: hsla(100%, 50%, 25%, 0.75);
    border-top-color: #ffbb00;
    border-top-color: currentColor;
    border-top-color: transparent;
    
    border-top-color: inherit;
    

    Values

    <color>
    Is a <color> CSS value describing the color of the top border.
    inherit
    Is a keyword denoting the color of the top border of the parent's element (which may be different from the border-top-color default value)

    Examples

    A simple div with a border

    HTML Content

    <div class="mybox">
        <p>This is a box with a border around it.
           Note which side of the box is
           <span class="redtext">red</span>.</p>
    </div>

    CSS Content

    .mybox {
        border: solid 0.3em gold;
        border-top-color: red;
        width: auto;
    }
    .redtext {
        color: red;
    }

    Result

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'border-top-color' in that specification.
    Candidate Recommendation No significant changes, though the transparent keyword, now included in <color> which has been extended, has been formally removed.
    CSS Level 2 (Revision 1)
    The definition of 'border-top-color' in that specification.
    Recommendation Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    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.0 (1.0) [1] 6.5 11 1.0

    [1] Gecko-based browsers like Firefox also supports the non-standard -moz-border-top-colors CSS properties that sets the top border to multiple colors.

    See also

    Document Tags and Contributors

    Last updated by: jsx,