mozilla
Your Search Results

    border-style

    Summary

    The border-style CSS property is a shorthand property for setting the line style for all four sides of the elements border.

    Note: The default value of border-style is none. This means that if you change the border-width and the border-color, you will not see the border unless you change this property to something other than none or hidden.

    • Initial value 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
    • 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-style: as specified
      • border-left-style: as specified
      • border-right-style: as specified
      • border-top-style: as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: <br-style>{1,4}
    
    border-style: style                  /* One-value syntax   */  E.g. border-style: dashed; 
    border-style: horizontal vertical    /* Two-value syntax   */  E.g. border-style: dotted solid; 
    border-style: top horizontal bottom  /* Three-value syntax */  E.g. border-style: hidden double dashed; 
    border-style: top right bottom left  /* Four-value syntax  */  E.g. border-style: none solid dotted dashed; 
    
    border-style: inherit

    Values

    <br-style>
    Is a keyword describing the style of the bottom border. It can have the following values:
    none
     
    Like for the hidden keyword, displays no border. In that case, except if a background image is set, the calculated values of border-width will be 0, even if specified otherwise through the property. In case of table cell and border collapsing, the none value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.
    hidden
     
    Like for the none keyword, displays no border. In that case, except if a background image is set, the calculated values of border-width will be 0, even if specified otherwise through the property. In case of table cell and border collapsing, the hidden value has the highest priority: it means that if any other conflicting border is set, it won't be displayed.
    dotted
     
    Displays a series of rounded dots. The spacing of the dots are not defined by the specification and are implementation-specific. The radius of the dots is half the calculated border-width.
    dashed
     
    Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
    solid
     
    Displays a single, straight, solid line.
    double
     
    Displays two straight lines that add up to the pixel amount defined as border-width .
    groove
     
    Displays a border leading to a carved effect. It is the opposite of ridge.
    ridge
     
    Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of groove.
    inset
     
    Displays a border that makes the box appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
    outset
     

    Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

    Examples

    Table with all property values

    Here is an example of all the property values

    HTML Content

    <table>
        <tr>
            <td class="b1">none</td>
            <td class="b2">hidden</td>
            <td class="b3">dotted</td>
            <td class="b4">dashed</td>
        </tr>
        <tr>
            <td class="b5">solid</td>
            <td class="b6">double</td>
            <td class="b7">groove</td>
            <td class="b8">ridge</td>
        </tr>
        <tr>
            <td class="b9">inset</td>
            <td class="b10">outset</td>
        </tr>
    </table>

    CSS Content

    /* Define look of the table */
    table {
        border-width: 3px;
        background-color: #52E396;
    }
    tr, td {
        padding: 2px;
    }
    
    /* border-style example classes */
    .b1 {border-style:none;}
    .b2 {border-style:hidden;}
    .b3 {border-style:dotted;}
    .b4 {border-style:dashed;}
    .b5 {border-style:solid;}
    .b6 {border-style:double;}
    .b7 {border-style:groove;}
    .b8 {border-style:ridge;}
    .b9 {border-style:inset;}
    .b10 {border-style:outset;}

    Output

    Specific​ations

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'border-style' in that specification.
    Candidate Recommendation No change
    CSS Level 2 (Revision 1)
    The definition of 'border-style' in that specification.
    Recommendation Added the 2-, 3- and 4-value syntaxes
    CSS Level 1
    The definition of 'border-style' 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
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 2.6 1.0 (1.9.2) 7.0 (Yes) 3.0

    See also