Quick Reach
What is the border property in CSS?
The border properties of CSS allow placing the border(s) around the HTML elements. This is very useful and gives the control to specify the border specifications.
You can place the borders in different elements like div, table, lists on the top, bottom, left or right with different colors and widths.
The borders make it quite easier to differentiate among different elements of your web page with different styling that otherwise you had to do by using HTML table/borders or by using the images etc.
Setting borders separately example
You can specify CSS border styles in one declaration by using the border property, for a simple border. Alternatively, you can specify the border properties separately by using the border properties like border-top, border-top-color, border-top-width etc to control border look.
Watch the Video of this tutorial:
This chapter will explain about common border properties in general with examples along with the links to border properties to their respective chapters that are given on the bottom of this tutorial.
Define border by single declaration
You can simply specify all border styles i.e top, bottom, left, right in the single declaration by using the border property. This allows setting the values for width, style, and color of borders.
This will be applied to all four borders of the specified element. For instance:
border: dotted 4px #00FFHH;
CSS div border example
In the following example, we will set the border of the <div> element by using border CSS property in the single declaration. The first div is set with the dotted style and the second is set with solid style value. The styles of borders are explained in a separate chapter.
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
|
<html>
<head>
<style>
/*Using border*/
.div_dotted
{
border: dotted 4px #355681;
color: #355681;
}
.div_solid
{
border: solid 1px black;
color: #355681;
}
</style>
</head>
<body>
<div>This is Div element with dotted style border</div>
<br />
<div>This is Div element with solid style border</div>
</body>
</html>
|
You can see, by the single declaration, you can set border in CSS. The first div is given the dotted border style with 4px border width. Also, the single declaration of the border is applied to the bottom, top, left, and right borders, i.e. All four borders are set by the single specification.
The cool thing about the borders is that you can specify all four border properties separately. See the following section.
How to set bottom, top, left and right border styles separately
In this example, we will set the styles and border color of all four sides separately. Following border properties will be used to specify borders separately:
- border-top
- border-bottom
- border-right
- border-left
A div border is set with the top as solid and HEX color, bottom as dashed and HEX color, left as double and color name while the right border as dotted with the RGB color code by using above border properties.
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
|
<html>
<head>
<style>
/*Using border*/
.div_ex
{
border-style: solid;
border-top: 2px solid #355681;
border-bottom: 1px dashed #00FFEE;
border-left: 3px double blue;
border-right: 3px dotted rgb(111,121,333)
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification</div>
</body>
</html>
|
Table border example using border property
Along with setting the table display settings by inline properties, you can specify the table border in CSS. In this example, the table style including border is styled.
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
|
<html>
<head>
<style>
/*Using border*/
table{
border-collapse: collapse;
border: 2px solid #006655;
}
table th{
border: 1px dashed black;
color: #FF8800;
}
table td{
border: 1px dotted black;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</body>
</html>
|
Important CSS border properties
Following are a few border properties. The linked properties go to its own chapter with detail and examples.
- border-color property
- border-style property
- border-radius property
- border-top property
- border-bottom
- border-left
- border-right
- border-width
Leave A Comment?