mozilla
Your Search Results

    border-bottom-style Redirect 1

    Summary

    The border-bottom-style CSS property sets the line style of the bottom border of a box.

    Note: The specification doesn't define how borders of different styles connect in the corners.

    Syntax

    Formal syntax: <br-style>
    
    border-bottom-style: none
    border-bottom-style: hidden
    border-bottom-style: dotted
    border-bottom-style: dashed
    border-bottom-style: solid
    border-bottom-style: double
    border-bottom-style: groove
    border-bottom-style: ridge
    border-bottom-style: inset
    border-bottom-style: outset
    
    border-bottom-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-bottom-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-bottom-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-bottom-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 or border-bottom-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.

    inherit
    Represents the border style used by the parent of the current element.

    Examples

    element {
            border-bottom-width: 1px;
            border-bottom-style: dotted;
            border-bottom-color: #000;
    }
    

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3 Candidate Recommendation No significant change.
    CSS Level 2 (Revision 1) Recommendation Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 5.5 9.2 1.0
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    See also

    Document Tags and Contributors

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