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