รูปแบบของ broder นั้นเราก็จะมีอยู่ 9 รูปแบบก็ตามนี้
border-style: none;
border-style: dotted;
border-style: solid;
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
background-color: #FFFFCC;
}
.border_none{
border-style: none;
}
.border_dotted{
border-style: dotted;
}
.border_solid{
border-style: solid;
}
.border_dashed{
border-style: dashed;
}
.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;
}
</style>
</head>
<body>
<p class="border_none"> ไม่เห็น border </p>
<p class="border_dotted"> border แบบ dotted </p>
<p class="border_solid"> border แบบ solid </p>
<p class="border_dashed"> border แบบ dashed </p>
<p class="border_double"> border แบบ double </p>
<p class="border_groove"> border แบบ groove </p>
<p class="border_ridge"> border แบบ ridge </p>
<p class="border_inset"> border แบบ inset </p>
<p class="border_outset"> border แบบ outset </p>
</body>
</html>
เท่านี้เราก็จะได้ border สวย ๆ เอาไปใช้งานแล้วก็หวังว่าจะเป็นประโยชร์แก่งานของท่านผู้ที่เข้ามาอ่านบทความนี้นะครับ