กำหนดขอบช่องกรอกฟอร์ม (Bordered Form Inputs) ด้วย CSS

เพื่อกำหนดขอบให้ช่องกรอกฟอร์ม ให้ใช้คุณสมบัติ CSS border

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อเพิ่มขอบ:

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="text"] {
      width: 100%;
      padding: 10px 15px;
      margin: 5px 0;
      box-sizing: border-box;
      border: 3px inset orange;
    }
  </style>
</head>
<body>
  <p>กรอกฟอร์มด้านล่าง:</p>
  <form>
    <label for="subject">Subject</label>
    <input type="text" id="subject" name="sub">
    <label for="student">Student</label>
    <input type="text" id="student" name="stu">
  </form>
</body>
</html>

คำอธิบาย: border: 3px inset orange สร้างขอบแบบ inset (หน้าตาเข้าใน) สีส้ม คุณสามารถเปลี่ยนสไตล์ขอบได้ เช่น solid, dashed, dotted, outset เป็นต้น