<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
padding: 10px;
margin-bottom: 10px;
}
#point{
border-top-style: none;
}
#point1{
border-top-style: hidden;
}
#point2{
border-top-style: dotted;
}
#point3{
border-top-style: dashed;
}
#point4{
border-top-style: solid;
}
#point5{
border-top-style: double;
}
#point6{
border-top-style: groove;
}
#point7{
border-top-style: ridge;
}
#point8{
border-top-style: inset;
}
#point9{
border-top-style: outset;
}
</style>
</head>
<body>
<h1>CSS border-top-style Property</h1>
<h2>border-top-style: none;</h2>
<div id="point">
This is div container.
</div>
<h2>border-top-style: hidden;</h2>
<div id="point1">
This is div container.
</div>
<h2>border-top-style: dotted;</h2>
<div id="point2">
This is div container.
</div>
<h2>border-top-style: dashed;</h2>
<div id="point3">
This is div container.
</div><h2>border-top-style: solid;</h2>
<div id="point4">
This is div container.
</div><h2>border-top-style: double;</h2>
<div id="point5">
This is div container.
</div><h2>border-top-style: groove;</h2>
<div id="point6">
This is div container.
</div>
<h2>border-top-style: ridge;</h2>
<div id="point7">
This is div container.
</div>
<h2>border-top-style: inset;</h2>
<div id="point8">
This is div container.
</div>
<h2>border-top-style: outset;</h2>
<div id="point9">
This is div container.
</div>
</body>
</html>