CSS Borders เส้นขอบ

3 min readSep 22, 2019

เกี่ยวกับเส้นขอบ เส้นขอบก็จะมีหลายแบบ แล้วแต่จะชอบแบบไหน และ Style ที่ใช้แบบ Internal

CSS Border Style เส้บขอบแบบต่างๆ

[border-style : …… ;] กำหนดรูปแบบของเส้นขอบ

มาดูเส้นขอบแต่ละแบบกัน จะได้เลือกที่ชอบใจ

<!DOCTYPE html>
<head><style>
//class : dotted อยู่ใน element : h1 เลือก style ทีละแบบ
      h1.dotted{
             border-style: dotted;
}
//class : mix อยู่ใน element : h1 เอาทุก styles มารวมกัน
      h1.mix{ 
             border-style: dotted dashed solid double;
}
</style>
</head>
<body>
    <h1 class="dotted">Hello World!</h1>
    <h1 class="mix">Hello World!</h1>
</body>
</html>

CSS Border Width ความหนาของเส้นขอบ

[border-width: ……. ; ] กำหนดความหนาของเส้นขอบ

<!DOCTYPE html>
<head><style>
//class : dotted อยู่ใน element : h1 เลือก style ทีละแบบ
      h1.dotted{
             border-style: dotted;
             border-width: 10px;
}
//class : mix อยู่ใน element : h1 เอาทุก styles มารวมกัน
      h1.mix{ 
             border-style: dotted dashed solid double;
             border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
    <h1 class="dotted">Hello World!</h1>
    <h1 class="mix">Hello World!</h1>
</body>
</html>

CSS Border Color สีของเส้นขอบ

[border-color: ….. ;] กำหนดสีของเส้นขอบ

<!DOCTYPE html>
<head><style>
//class : dotted อยู่ใน element : h1 เลือก style ทีละแบบ
      h1.dotted{
             border-style: dotted;
             border-width: 10px;
             border-color: blue;
}
//class : mix อยู่ใน element : h1 เอาทุก styles มารวมกัน
      h1.mix{ 
             border-style: dotted dashed solid double;
             border-width: 2px 10px 4px 20px;
             border-color: brown green blue yellow;}
</style>
</head>
<body>
    <h1 class="dotted">Hello World!</h1>
    <h1 class="mix">Hello World!</h1>
</body>
</html>

CSS Border — Individual Sides เส้นขอบแต่ละด้าน

[border-top-style: …….. ;] top คือด้านของเส้น เราเอากำหนดเองได้ และกำหนดรูปแบบของเส้นขอบ

<!DOCTYPE html>
<head><style>
//class : individual อยู่ใน element : h1 เอาทุก styles มารวมกัน
      h1.individual{ 
             border-top-style: double;
             border-right-style: solid;
             border-bottom-style: double; 
             border-left-style: solid;
             border-width: 10px;
             border-color: coral;
     }
</style>
</head>
<body>    <h1 class="individual">Hello World!!</h1></body>
</html>

CSS Border — Shorthand Property

และเราสามารถรวม property ดังนี้เข้าด้วยกันได้

[border: …width… …style….. …color…;]

border-width
border-style (required)
border-color

<!DOCTYPE html>
<head><style>//class : mix อยู่ใน element : h1 เอาทุก property มารวมกัน
      h1.mix{ 
             border-bottom: 10px solid green;
             background-color:rgb(207, 233, 156);}</style>
</head>
<body>   <h1 class="mix">Hello World!</h1></body>
</html>

CSS Rounded Borders เส้นขอบโค้ง

[border-radius: …… ;] ขึ้นอยู่กับจำนวน 2px ตัวเลขที่เราใส่เข้าไปว่ามากหรือน้อย ถ้ามาก เส้นก็จะโค้งมาก ถ้าน้อยเส้นก็จะโค้งน้อย

มาดูเส้นขอบแบบต่างๆ กัน

<!DOCTYPE html>
<head><style>//class : mix อยู่ใน element : h1 เอาทุก property มารวมกัน
      h1.mix{ 
             border-radius: 10px;
             border : solid green;
             background-color:rgb(207, 233, 156);}</style>
</head>
<body><h1 class="mix">Hello World!</h1></body>

จบแล้วสำหรับเรื่องของเส้นเส้นๆ แล้วจะอยากได้เส้นแบบไหน เส้นเล็ก เส้นใหญ่ เส้นขาด เส้นสี แล้วแต่ชอบ

ศึกษาจากเว็บไซต์นี้ https://www.w3schools.com/css/css_border.asp