CSS - พรมแดน

ชายแดนคุณสมบัติช่วยให้คุณสามารถระบุได้ว่าเส้นขอบของกล่องที่เป็นตัวแทนของธาตุควรมีลักษณะ มีคุณสมบัติสามประการของเส้นขอบที่คุณสามารถเปลี่ยนแปลงได้ -

border-color ระบุสีของเส้นขอบ
border-style ระบุว่าเส้นขอบควรเป็นเส้นทึบเส้นประเส้นคู่หรือค่าใดค่าหนึ่งที่เป็นไปได้
border-width ระบุความกว้างของเส้นขอบ

ตอนนี้เราจะดูวิธีใช้คุณสมบัติเหล่านี้พร้อมตัวอย่าง

คุณสมบัติสีขอบ

คุณสมบัติสีเส้นขอบช่วยให้คุณเปลี่ยนสีของเส้นขอบรอบ ๆ องค์ประกอบได้ คุณสามารถเปลี่ยนสีของด้านล่างซ้ายด้านบนและด้านขวาของเส้นขอบขององค์ประกอบทีละรายการโดยใช้คุณสมบัติ -

border-bottom-color เปลี่ยนสีของเส้นขอบด้านล่าง
border-top-color เปลี่ยนสีของเส้นขอบด้านบน
border-left-color เปลี่ยนสีของเส้นขอบด้านซ้าย
border-right-color เปลี่ยนสีของเส้นขอบด้านขวา

ตัวอย่างต่อไปนี้แสดงผลของคุณสมบัติเหล่านี้ทั้งหมด -

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>
      
      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติชายแดน

คุณสมบัติสไตล์เส้นขอบช่วยให้คุณสามารถเลือกสไตล์ของเส้นขอบต่อไปนี้ -

none- ไม่มีขอบ (เทียบเท่าความกว้างของเส้นขอบ: 0;)
solid - เส้นขอบเป็นเส้นทึบเส้นเดียว
dotted - เส้นขอบเป็นชุดของจุด
dashed - Border คือชุดเส้นสั้น ๆ
double - เส้นขอบเป็นเส้นทึบสองเส้น
groove - เส้นขอบดูราวกับว่าแกะสลักไว้ในหน้ากระดาษ
ridge - เส้นขอบมีลักษณะตรงกันข้ามกับร่อง
inset - เส้นขอบทำให้กล่องดูเหมือนฝังอยู่ในหน้า
outset - ขอบทำให้กล่องดูเหมือนหลุดออกมาจากผ้าใบ
hidden - เหมือนกับไม่มียกเว้นในแง่ของการแก้ปัญหาความขัดแย้งชายแดนสำหรับองค์ประกอบตาราง

คุณสามารถเปลี่ยนสไตล์ของเส้นขอบด้านล่างซ้ายบนและขวาขององค์ประกอบทีละรายการโดยใช้คุณสมบัติต่อไปนี้ -

border-bottom-style เปลี่ยนรูปแบบของเส้นขอบด้านล่าง
border-top-style เปลี่ยนรูปแบบของเส้นขอบด้านบน
border-left-style เปลี่ยนรูปแบบของเส้นขอบด้านซ้าย
border-right-style เปลี่ยนรูปแบบของเส้นขอบด้านขวา

ตัวอย่างต่อไปนี้แสดงลักษณะเส้นขอบเหล่านี้ทั้งหมด -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติความกว้างของเส้นขอบ

คุณสมบัติ border-width ช่วยให้คุณสามารถกำหนดความกว้างของเส้นขอบองค์ประกอบได้ ค่าของคุณสมบัตินี้อาจเป็นความยาวเป็น px, pt หรือ cm หรือควรกำหนดเป็นthin, medium หรือ thick

คุณสามารถเปลี่ยนความกว้างของเส้นขอบด้านล่างด้านบนด้านซ้ายและด้านขวาขององค์ประกอบโดยใช้คุณสมบัติต่อไปนี้ -

border-bottom-width เปลี่ยนความกว้างของเส้นขอบด้านล่าง
border-top-width เปลี่ยนความกว้างของเส้นขอบด้านบน
border-left-width เปลี่ยนความกว้างของเส้นขอบด้านซ้าย
border-right-width เปลี่ยนความกว้างของเส้นขอบด้านขวา

ตัวอย่างต่อไปนี้แสดงความกว้างของเส้นขอบทั้งหมดนี้ -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติของเส้นขอบโดยใช้ชวเลข

คุณสมบัติ border ช่วยให้คุณระบุสีสไตล์และความกว้างของเส้นในคุณสมบัติเดียว -

ตัวอย่างต่อไปนี้แสดงวิธีการใช้คุณสมบัติทั้งสามในคุณสมบัติเดียว นี่คือคุณสมบัติที่ใช้บ่อยที่สุดเพื่อกำหนดเส้นขอบรอบองค์ประกอบใด ๆ

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -