border-style

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

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.

Example

<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Tutorials</title>
        <style>
            div {
                border-width: 5px;
                border-style: solid;
                border-color: black;
            }
        </style>
    </head>
    <body>
        <div>
            Border-Style Demonstration 
        </div>
    </body>
</html>

Output

Border-Style Demonstration