Border Style | Codingku

<!DOCTYPE html>
<html lang="id">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Tutorial CSS: Border Style</title>
 <style>
 .border {
 border-width: 4px;
 border-color: darkorange;
 padding: 1em;
 margin-bottom: 1em;
 }

.border--dotted {
            border-style: dotted;
        }

.border--dashed {
            border-style: dashed;
        }

.border--solid {
            border-style: solid;
        }

.border--double {
            border-style: double;
        }

.border--groove {
            border-style: groove;
        }

.border--ridge {
            border-style: ridge;
        }

.border--inset {
            border-style: inset;
        }

.border--outset {
            border-style: outset;
        }

.border--none {
            border-style: none;
        }

.border--hidden {
            border-style: hidden;
        }

.border--mix {
 border-style: dotted dashed solid double;
 }
 </style>
</head>

<body>
 <h2>The border-style Property</h2>

A dotted border.
 A dashed border.
 A solid border.
 A double border.
 A groove border.
 A ridge border.
 An inset border.
 An outset border.
 No border.
 A hidden border.
 A mixed border.
</body></html>