<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
<
style
>
/* CSS for Square boxes */
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"w3-container w3-center"
>
<
h2
class
=
"w3-text-green w3-xxlarge"
>GeeksForGeeks</
h2
>
</
div
>
<
div
class
=
"w3-container w3-center"
>
<
h2
class
=
"w3-text-pink"
>Coloured Border</
h2
>
<
span
class
=
"w3-border w3-border-amber"
></
span
>
<
span
class
=
"w3-border w3-border-aqua"
></
span
>
<
span
class
=
"w3-border w3-border-blue"
></
span
>
<
span
class
=
"w3-border w3-border-cyan"
></
span
>
<
span
class
=
"w3-border w3-border-pink"
></
span
>
</
div
>
<
div
class
=
"w3-container w3-center"
>
<
h2
class
=
"w3-text-pink"
>Hoverable Coloured Border</
h2
>
<
span
class
=
"w3-border w3-hover-border-amber"
></
span
>
<
span
class
=
"w3-border w3-hover-border-aqua"
></
span
>
<
span
class
=
"w3-border w3-hover-border-blue"
></
span
>
<
span
class
=
"w3-border w3-hover-border-cyan"
></
span
>
<
span
class
=
"w3-border w3-hover-border-pink"
></
span
>
</
div
>
</
body
>
</
html
>