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

    Summary

    The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

    Like all shorthand properties, a missing value for one of the longhand properties is set to the corresponding initial value. Also note that border-image, though not settable using this shorthand, is reset to its initial value, that is, none. This allows to use border to reset any border settings set earlier in the cascade. As the W3C intends to preserve this property in future level of the spec, it is recommended to use this method to reset border settings.

    Note: While the border-width, border-style, and border-color shorthand properties accept up to four values, allowing one to set different width, style or color values for the different border edges, this property only accepts a single value for each property, leading to the same border for all four edges.

    • Initial value the concatenation of the initial values of its longhand properties:
      • border-width: the concatenation of the initial values of its longhand properties:
        • border-top-width: medium
        • border-right-width: medium
        • border-bottom-width: medium
        • border-left-width: medium
      • border-style: the concatenation of the initial values of its longhand properties:
        • border-top-style: none
        • border-right-style: none
        • border-bottom-style: none
        • border-left-style: none
      • border-color: 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-width: as each of the properties of the shorthand:
      • border-style: as each of the properties of the shorthand:
        • border-bottom-style: as specified
        • border-left-style: as specified
        • border-right-style: as specified
        • border-top-style: as specified
      • border-color: 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-color: 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
      • border-style: no
      • border-width: as each of the properties of the shorthand:
        • border-bottom-width: yes, as a length
        • border-left-width: yes, as a length
        • border-right-width: yes, as a length
        • border-top-width: yes, as a length
    • Canonical order order of appearance in the formal grammar of the values

    Syntax

    border: 1px;
    border: 2px dotted;
    border: medium dashed green;
    

    Values

    <br-width>
    Default value medium is used if absent. See border-width.
    <br-style>
    Default value none is used if absent. See border-style.
    <color>
    A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color). See border-color.
     

    Formal syntax

    <br-width> || <br-style> || <color>

    Examples

    border

    HTML Content

    <div class="brd"> look at my borders </div>
    <p>you can play with the css bellow to test properties changes</p>
    <style contenteditable>
      .brd { border: 1px solid black }
    </style>
    
    

    CSS Content

    .brd { border: 1px solid black}
    
    style { 
      border: 1px dashed black;
      display:block;
    } 

    Border demo

    HTML Content

    Click the different examples to see them in action:
    <button>border: 2px solid #ccc;width: 300px</button>
    <button>border: 20px solid #ccc;width: 300px</button>
    Try it yourself: <input type="text" id="cd" value="border: 14px red dashed">
    
    <div id="example">Result</div>

    CSS Content

    body {font: 14px/1.5 'Open Sans',sans-serif;}
    button { color: #369; border: none; font-size: 14px; padding: 10px 0; background: transparent; display: block;}

    JavaScript Content

    document.addEventListener('click', function(ev) {
        var t = ev.target;
        var out = document.getElementById('example');
        if (t.tagName === 'BUTTON') {
    var str = t.innerHTML;
            out.style = str + ';transition: 0.5s';
        }
    }, false);
    document.getElementById('cd').addEventListener('keyup', function(ev){
    document.getElementById('example').style = this.value + ';transition: 0.5s';
    }, false);
    
    

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'border' in that specification.
    Candidate Recommendation Technically removes the support for transparent as it is now a valid <color>; this has no practical influence.
    Though it cannot be set to another value using the shorthand, border does now reset border-image to its initial value (none).
    CSS Level 2 (Revision 1)
    The definition of 'border' in that specification.
    Recommendation Accepts the inherit keyword. Also accepts transparent as a valid color.
    CSS Level 1
    The definition of 'border' in that specification.
    Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 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.0

    See also