console
<!DOCTYPE HTML>
<html>
<head>
<style>
.dotted {border-style: dotted;
border-width: thick;
border-color: red green blue orange;
}
.dashed {border-style: dashed dotted;
border-width: thick;
border-color: #92b3a5;
}
.solid {border-style: solid;
border-width: 5px 20px;
}
.double {border-style: double;
border-width: 25px 10px 4px 35px;
}
.groove { border-style: groove;
border-width: 20px 5px;
border-color: #eea2a4;
}
.ridge {border-style: ridge;
border-width: thick;
border-color: rgb(255, 0, 0);
}
.inset {border-style: inset;
border-width: thick;
}
.outset {border-style: outset;
border-width: thick;
}
.none {border-style: none;
}
.hidden {border-style: hidden;
}
.mix {border-style: dotted dashed solid double;
border-width: 10px;
border-color: red green blue orange;
}
.radius{
border: 3px solid red;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="dotted">点状边框。</div><br>
<div class="dashed">虚线边框。</div><br>
<div class="solid">实线边框。</div><br>
<div class="double">双线边框。</div><br>
<div class="groove">凹槽边框。</div><br>
<div class="ridge">垄状边框。</div><br>
<div class="inset">3D inset 边框。</div><br>
<div class="outset">3D outset 边框。</div><br>
<div class="none">无边框。</div><br>
<div class="hidden">隐藏边框。</div><br>
<div class="mix">混合边框。</div><br>
<div class="radius">圆角边框</div>
</body>
</html>