Quick Reach
The border style property
The border-style property defines what type of border to choose from the available list given below.
An example to set border-style
The CSS border-style property also allows setting the different style for four borders (left, right, top and bottom). Though, border style CSS can be specified in a single declaration as well by using the border property.
All border styles example
The type of borders that can be set by using the border-style property are:
- none
- solid
- dashed
- dotted
- double
- groove
- ridge
- inset
- outset
- hidden
For example, the border style can be set as follows:
border-style: solid;
This will set the solid border, which is a single solid line for all four borders.
Example of border style in single declaration
You may specify four values to four borders in a single declaration. This is how you can specify it in the border-style property:
border-style: solid dotted dashed double;
The sequence if four values are given: Top, Right, Bottom and Left.
in this case, the solid will be assigned to the top, dotted to the right border, dashed to the bottom and double to the left border. See the following example online by pressing the link or image:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-style: solid dotted dashed double;
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification
<br />
</div>
</body>
</html>
|
A border-style example with all possible values
This example shows how each value of the CSS border style will look. Ten div elements are created and each is assigned with different border style class.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<html>
<head>
<style>
/*Using CSS border*/
.div1
{
border-style: none;
border-width: 2px;
}
.div2
{
border-style: solid;
border-width: 2px;
}
.div3
{
border-style: dashed;
border-width: 2px;
}
.div4
{
border-style: dotted;
border-width: 2px;
}
.div5
{
border-style: double;
border-width: 2px;
}
.div6
{
border-style: groove;
border-width: 2px;
border-color: #009988;
}
.div7
{
border-style: ridge;
border-width: 2px;
border-color: #007788;
}
.div8
{
border-style: inset;
border-width: 2px;
}
.div9
{
border-style: outset;
border-width: 2px;
}
.div10
{
border-style: hidden;
border-width: 2px;
}
</style>
</head>
<body>
<div>This is Div element with none value.</div><br />
<div>This is Div element with solid value</div><br />
<div>This is Div element with dashed value</div><br />
<div>This is Div element with dotted value</div><br />
<div>This is Div element with double value</div><br />
<div>This is Div element with groove value</div><br />
<div>This is Div element with ridge value</div><br />
<div>This is Div element with inset value</div><br />
<div>This is Div element with outset value</div><br />
<div>This is Div element with hidden value</div><br />
</body>
</html>
|
You can see, ten div elements with ten different border style values.
You may also like to read: CSS border
Leave A Comment?