1/*Chill border for everyday usage */
2border: dashed 2px rgb(168, 219, 231);
3border-radius: 10px;
1p{
2 border: 1px solid #f00;
3 /* Set Border For Only Specific Side */
4 border-left: 1px solid #00f;
5 border-right: 1px solid #00f;
6 border-top: 1px solid #00f;
7 border-bottom: 1px solid #00f;
8 /* Another Rules Can Be Applied*/
9 border-top-style: solid dashed dotted;
10 border-top-width: 2px;
11 border-top-color: #00f;
12 /* Apply Also For Right, Bottom And Left*/
13}
14/*
15 Border ShortHand
16 border: border-width border-style border-color
17*/
1<html>
2 <head>
3 </head>
4
5 <body>
6 <p style = "border-width:4px; border-style:none;">
7 This is a border with none width.
8 </p>
9
10 <p style = "border-width:4px; border-style:solid;">
11 This is a solid border.
12 </p>
13
14 <p style = "border-width:4px; border-style:dashed;">
15 This is a dashed border.
16 </p>
17
18 <p style = "border-width:4px; border-style:double;">
19 This is a double border.
20 </p>
21
22 <p style = "border-width:4px; border-style:groove;">
23 This is a groove border.
24 </p>
25
26 <p style = "border-width:4px; border-style:ridge">
27 This is a ridge border.
28 </p>
29
30 <p style = "border-width:4px; border-style:inset;">
31 This is a inset border.
32 </p>
33
34 <p style = "border-width:4px; border-style:outset;">
35 This is a outset border.
36 </p>
37
38 <p style = "border-width:4px; border-style:hidden;">
39 This is a hidden border.
40 </p>
41
42 <p style = "border-width:4px;
43 border-top-style:solid;
44 border-bottom-style:dashed;
45 border-left-style:groove;
46 border-right-style:double;">
47 This is a a border with four different styles.
48 </p>
49 </body>
50</html>
1h1 {border-top: 5px solid red;}
2h2 {border-top: 4px dotted blue;}
3div {border-top: double;}