<!DOCTYPE html>
<html>
<head>
<title>GEEKSFORGEEKS</title>
<style>
div {
padding
:
10px
50px
;
}
h
1
{
color
:
rgb
(
20
,
117
,
8
);
}
.
dotted
{
border-top
:
5px
#000
dotted
;
}
.dotted-gradient {
background-image
:
linear-gradient(to
right
,
#000
30%
, rgba(
255
,
255
,
255
,
0
)
10%
);
background-position
:
top
;
background-
size
:
10px
3px
;
background-repeat
:
repeat-x
;
}
.dotted-spaced {
background-image
:
linear-gradient(to
right
,
#000
10%
, rgba(
255
,
255
,
255
,
0
)
0%
);
background-position
:
top
;
background-
size
:
10px
3px
;
background-repeat
:
repeat-x
;
}
.
left
{
float
:
left
;
padding
:
40px
10px
;
background-color
:
rgb
(
79
,
189
,
79
);
}
.
left
.
dotted
{
border-left
:
1px
#000
dotted
;
border-top
:
none
;
}
.
left
.dotted-gradient {
background-image
:
linear-gradient(to
bottom
,
#000
40%
, rgba(
255
,
255
,
255
,
0
)
10%
);
background-position
:
left
;
background-
size
:
3px
10px
;
background-repeat
:
repeat-y
;
}
.
left
.dotted-spaced {
background-image
:
linear-gradient(to
bottom
,
#000
10%
, rgba(
255
,
255
,
255
,
0
)
0%
);
background-position
:
left
;
background-
size
:
3px
10px
;
background-repeat
:
repeat-y
;
}
</style>
</head>
<body>
<h
1
>GEEKSFORGEEKS</h
1
>
<div>no border</div>
<div class=
"dotted"
>
dotted
border</div>
<div class=
"dotted-gradient"
>
dotted
border with gradient</div>
<div class=
"dotted-spaced"
>
dotted
spaced border</div>
<div class=
"left"
>no border</div>
<div class=
"dotted left"
>
dotted
border</div>
<div class=
"dotted-gradient left"
>
dotted
border with gradient</div>
<div class=
"dotted-spaced left"
>
dotted
spaced border</div>
</body>
</html>