CSS Border Styles
[this page | pdf | back links]
CSS border-style
properties (i.e. border-style,
border-bottom-style,
border-left-style,
border-right-style
and border-top-style)
can take the following values (other than inherit and initial):
|
Value
|
Description
|
|
dashed
|
Dashed border
|
|
dotted
|
Dotted border
|
|
double
|
Double border
|
|
groove
|
Effect depends on
relevant border-color value (i.e. value of border-color,
border-bottom-color,
border-left-color,
border-right-color
or border-top-color
|
|
hidden
|
Same as "none"
except when there are border conflicts
|
|
inset
|
Effect depends on
relevant border-color value
|
|
none
|
(default value). No
border
|
|
outset
|
Effect depends on relevant
border-color value
|
|
ridge
|
Effect depends on relevant
border-color value
|
|
solid
|
Solid border
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>div {border: 3px solid red; display: inline-block; width: 100px;}</style>
</head>
<body>
Different CSS Border styles:<br>
<table>
<tr><td>dashed</td><td><div style="border-style: dashed;"> </div></td>
<tr><td>dotted</td><td><div style="border-style: dotted;"> </div></td>
<tr><td>double</td><td><div style="border-style: double;"> </div></td>
<tr><td>groove</td><td><div style="border-style: groove;"> </div></td>
<tr><td>hidden</td><td><div style="border-style: hidden;"> </div></td>
<tr><td>inset</td><td><div style="border-style: inset;"> </div></td>
<tr><td>none</td><td><div style="border-style: none;"> </div></td>
<tr><td>outset</td><td><div style="border-style: outset;"> </div></td>
<tr><td>ridge</td><td><div style="border-style: ridge;"> </div></td>
<tr><td>solid</td><td><div style="border-style: solid;"> </div></td>
</table>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties