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