เรียนคอนเทนเนอร์
| ชั้น | กำหนด | |
|---|
| W3-Container | ภาชนะสำหรับเนื้อหา HTML (เพิ่ม padding 16px ซ้ายและขวา) | ลองมัน |
| ใช้กับการเรียนสี | ลองมัน |
| ใช้เป็นส่วนหัว | ลองมัน |
| ใช้เป็นส่วนท้าย | ลองมัน |
| ใช้กับ W3-leftbar | ลองมัน |
| ใช้กับ W3-BottomBar | ลองมัน |
| W3 ส่วน | ภาชนะสำหรับเนื้อหา HTML (เพิ่มด้านบน 16px ขอบและด้านล่าง) | ลองมัน |
| W3-ป้าย | ป้ายวงกลม 8 | ลองมัน |
| W3 แท็ก | แท็กสี่เหลี่ยมเพิ่มเติมในภายหลัง! | ลองมัน |
| W3-UL | รายการเรียงลำดับ | ลองมัน |
| W3 หน้าจอ-Container | ตู้คอนเทนเนอร์สำหรับการเรียน W3-จอแสดงผล (ตำแหน่งองค์ประกอบด้านบนซ้ายขวาด้านบนด้านล่างด้านซ้ายหรือมุมขวาล่างหรือในช่วงกลางของภาชนะ) | ลองมัน |
| W3 ภาพ | เลิกใช้ ใช้ W3 หน้าจอภาชนะแทน | ลองมัน |
| W3-blockquote | ถอดออกใน 2.0 (ใช้ W3-leftbar แทน) | ลองมัน |
| W3 รหัส | ภาชนะรหัส | ลองมัน |
| W3 ความคืบหน้าในภาชนะ | ภาชนะแถบความคืบหน้า | ลองมัน |
เรียนตาราง
เรียนบัตร
| ชั้น | กำหนด | |
|---|
| W3 การ์ด | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (มีขอบ) | ลองมัน |
| W3 บัตร-2 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (2px เงาขอบ) | ลองมัน |
| W3 บัตร-4 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (4px เงาขอบ) | ลองมัน |
| W3 บัตร-8 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (8px เงาขอบ) | ลองมัน |
| W3 บัตร-12 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (12px เป้เงา) | ลองมัน |
| W3 บัตร-16 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (16px เป้เงา) | ลองมัน |
| W3 บัตร-24 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (24px เป้เงา) | ลองมัน |
การเรียนการสอนที่ตอบสนองต่อ
| ชั้น | กำหนด | |
|---|
| W3 แถว | ภาชนะสำหรับหนึ่งแถวเนื้อหาตอบสนองของเหลว | ลองมัน |
| W3 แถว-padding | แถวที่คอลัมน์ทั้งหมดมี padding เริ่มต้น | ลองมัน |
| W3 เนื้อหา | ตู้คอนเทนเนอร์สำหรับเนื้อหาขนาดศูนย์กลางการแก้ไข | ลองมัน |
| | |
|
| W3 ครึ่ง | ครึ่งภาชนะคอลัมน์ (1/2) หน้าจอ | ลองมัน |
| W3 สาม | ภาชนะคอลัมน์ (1/3) หน้าจอที่สาม | ลองมัน |
| W3-twothird | สองสามภาชนะคอลัมน์ (2/3) หน้าจอ | ลองมัน |
| W3 ไตรมาส | ไตรมาสภาชนะคอลัมน์ (1/4) หน้าจอ | ลองมัน |
| W3-threequarter | สามในสี่ภาชนะคอลัมน์ (3/4) หน้าจอ | ลองมัน |
| W3-Col | ภาชนะคอลัมน์เนื้อหา HTML ใด ๆ | ลองมัน |
| | |
| L1 - L12 | ขนาดตอบสนองสำหรับหน้าจอขนาดใหญ่ | ลองมัน |
| M1 - M12 | ขนาดตอบสนองสำหรับหน้าจอขนาดกลาง | ลองมัน |
| S1 - S12 | ขนาดตอบสนองสำหรับหน้าจอขนาดเล็ก | ลองมัน |
| | |
|
| W3 ซ่อนขนาดเล็ก | ซ่อนเนื้อหาบนหน้าจอขนาดเล็ก (น้อยกว่า 601px) | ลองมัน |
| W3 ซ่อนกลาง | ซ่อนเนื้อหาบนหน้าจอขนาดกลาง | ลองมัน |
| W3 ซ่อนขนาดใหญ่ | ซ่อนเนื้อหาบนหน้าจอขนาดใหญ่ (ขนาดใหญ่กว่า 992px) | ลองมัน |
เรียนนำร่อง
| ชั้น | กำหนด | |
|---|
| W3-Navbar | แถบนำทาง | ลองมัน |
| แถบนำทางพับ | ลองมัน |
| W3-topnav | แถบนำทางด้านบน | ลองมัน |
| W3-sidenav | แถบนำทางด้านข้าง | ลองมัน |
| แถบนำทางด้านข้างซ้อนทับเนื้อหาหลัก | ลองมัน |
| แถบนำทางด้านข้างซ้อนทับเนื้อหาหลักทั้งหมด | ลองมัน |
| แถบนำทางด้านข้างขยับเนื้อหาหลักไปทางขวา | ลองมัน |
| แถบนำทางด้านข้างที่มีพื้นหลังซ้อนทับ | ลองมัน |
| W3 ยุบ | นำทางโดยอัตโนมัติอย่างเต็มที่ด้านการตอบสนอง | ลองมัน |
| W3-dropnav | นำทางแบบเลื่อนลง | ลองมัน |
| W3-แบบเลื่อนลงคลิก | องค์ประกอบแบบเลื่อนลงคลิกได้ | ลองมัน |
| W3-แบบเลื่อนลง-hover | องค์ประกอบแบบเลื่อนลง Hoverable | ลองมัน |
| องค์ประกอบแบบเลื่อนลง Hoverable (ใช้ไปใน W3-Navbar) | ลองมัน |
| องค์ประกอบแบบเลื่อนลง Hoverable (ใช้ไปใน W3-sidenav) | ลองมัน |
| องค์ประกอบแบบเลื่อนลง Hoverable (ใช้ไปใน W3-topnav) | ลองมัน |
| W3-หีบเพลง | ซ่อนและแสดงเนื้อหาพับ | ลองมัน |
| หีบเพลงคลิกได้และเลื่อนลงมาใช้ใน W3-sidenav | ลองมัน |
| W3-เลขหน้า | การเชื่อมโยงการแบ่งหน้า | ลองมัน |
เรียนปุ่ม
| ชั้น | กำหนด | |
|---|
| W3-btn | HTML ของปุ่มสี่เหลี่ยม | ลองมัน |
| HTML ของปุ่มสี่เหลี่ยมที่มีผลกระทบระลอก | ลองมัน |
| W3-btn ลอย | ปุ่มวงกลมลอย | ลองมัน |
| ปุ่มลอยวงกลมที่มีผลกระทบระลอก | ลองมัน |
| W3-btn กลุ่ม | ปุ่มจัดกลุ่ม | ลองมัน |
| W3-btn บล็อก | ปุ่มเต็มความกว้าง (100%) | ลองมัน |
เรียนการป้อนข้อมูล
| ชั้น | กำหนด | |
|---|
| W3 รูปแบบ | เช่นเดียวกับ W3-padding | ลองมัน |
| รูปแบบการป้อนข้อมูลเป็นการ์ด | ลองมัน |
| W3 อินพุต | องค์ประกอบของการป้อนข้อมูล | ลองมัน |
| องค์ประกอบป้อนข้อมูล (ป้ายด้านบน) | ลองมัน |
| องค์ประกอบป้อนข้อมูล (ป้ายด้านล่าง) | ลองมัน |
| W3 กลุ่ม | กลุ่มขององค์ประกอบ HTML | ลองมัน |
| W3 ฉลาก | ป้อนป้ายชื่อ | ลองมัน |
| W3-ตรวจสอบ | ตรวจสอบการป้อนข้อมูล (สีเปลี่ยนแปลงเมื่อป้อนข้อมูลที่ไม่ถูกต้อง) | ลองมัน |
| W3 ตรวจสอบ | ประเภทขาเข้าช่องทำเครื่องหมาย | ลองมัน |
| W3 วิทยุ | ประเภทขาวิทยุ | ลองมัน |
| W3 เลือก | การป้อนข้อมูลองค์ประกอบเลือก | ลองมัน |
| W3-เคลื่อนไหวอินพุต | เคลื่อนไหวความกว้างของการป้อนข้อมูลถึง 100% | ลองมัน |
เรียน Modal
| ชั้น | กำหนด | |
|---|
| W3 กิริยา | ภาชนะ Modal | ลองมัน |
| W3 กิริยาเนื้อหา | องค์ประกอบป๊อปอัพคำกริยา | ลองมัน |
| W3-คำแนะนำเครื่องมือ | องค์ประกอบเคล็ดลับ | ลองมัน |
| W3 ข้อความ | ข้อความคำแนะนำเครื่องมือ | ลองมัน |
| เคล็ดลับแบบอินไลน์ | ลองมัน |
คลาสนิเมชั่น
| ชั้น | กำหนด | |
|---|
| W3-เคลื่อนไหวบน | เคลื่อนไหวองค์ประกอบจาก -300px ด้านบนเพื่อ 0px | ลองมัน |
| W3-เคลื่อนไหวซ้าย | เคลื่อนไหวองค์ประกอบจากซ้ายไป -300px 0px | ลองมัน |
| W3-เคลื่อนไหวด้านล่าง | เคลื่อนไหวองค์ประกอบจาก -300px ด้านล่างเพื่อ 0px | ลองมัน |
| W3-เคลื่อนไหวขวา | เคลื่อนไหวองค์ประกอบจาก -300px สิทธิที่จะ 0px | ลองมัน |
| W3-เคลื่อนไหว-ทึบ | เคลื่อนไหวทึบองค์ประกอบของ 0-1 | ลองมัน |
| W3-เคลื่อนไหวซูม | เคลื่อนไหวองค์ประกอบจาก 0 ถึง 100% ในขนาด | ลองมัน |
| W3-เคลื่อนไหวซีดจาง | เคลื่อนไหวทึบองค์ประกอบของ 0-1 และ 1-0 (จางหายในและนอก) | ลองมัน |
| W3 หมุน | หมุนได้ 360 องศาไอคอน | ลองมัน |
| Spin องค์ประกอบใด ๆ ได้ 360 องศา | ลองมัน |
| W3-เคลื่อนไหวอินพุต | เคลื่อนไหวความกว้างของช่องใส่ถึง 100% | ลองมัน |
อาคารเรียน
| ชั้น | กำหนด | |
|---|
| W3 เล็ก ๆ | ระบุขนาดตัวอักษร 10 พิกเซล | ลองมัน |
| W3 ขนาดเล็ก | ระบุขนาดตัวอักษร 12 พิกเซล | ลองมัน |
| W3 ขนาดใหญ่ | ระบุขนาดตัวอักษร 20 พิกเซล | ลองมัน |
| W3-XLarge | ระบุขนาดตัวอักษร 24 พิกเซล | ลองมัน |
| W3-xxlarge | ระบุขนาดตัวอักษร 32 พิกเซล | ลองมัน |
| W3-XXXLarge | ระบุขนาดตัวอักษร 48 พิกเซล | ลองมัน |
| W3-จัมโบ้ | ระบุขนาดตัวอักษร 64 พิกเซล | ลองมัน |
| W3 บาง | ระบุข้อความ slimmer | ลองมัน |
| W3 กว้าง | ระบุข้อความที่กว้างขึ้น | ลองมัน |
| W3 แนวตั้ง | ระบุข้อความในแนวตั้ง | ลองมัน |
| W3 บน | เนื้อหาคงด้านบนของหน้า | ลองมัน |
| W3 ศูนย์ | เนื้อหาเป็นศูนย์กลาง | ลองมัน |
| W3 วงกลม | เนื้อหาวงกลม | ลองมัน |
| W3 ซ่อน | เนื้อหาที่ซ่อน (display: none) | ลองมัน |
| W3 แสดง | แสดงเนื้อหา (จอแสดงผล: block) | ลองมัน |
| W3-Show-บล็อก | นามแฝงของ W3 แสดง (จอแสดงผล: block) | ลองมัน |
| W3-Show-อินไลน์บล็อก | แสดงเนื้อหาแบบอินไลน์บล็อก (จอแสดงผล: อินไลน์ block) | ลองมัน |
| W3 ซ่อนขนาดเล็ก | ซ่อนเนื้อหาบนหน้าจอขนาดเล็ก (น้อยกว่า 601px) | ลองมัน |
| W3 ซ่อนกลาง | ซ่อนเนื้อหาบนหน้าจอขนาดกลาง | ลองมัน |
| W3 ซ่อนขนาดใหญ่ | ซ่อนเนื้อหาบนหน้าจอขนาดใหญ่ (ขนาดใหญ่กว่า 992px) | ลองมัน |
| W3 ซ้าย | เนื้อหาที่เหลือปรับ | ลองมัน |
| W3 ขวา | เนื้อหาปรับขวา | ลองมัน |
| W3 ซ้าย-align | ข้อความชิดซ้าย | ลองมัน |
| W3 ขวาจัด | ข้อความชิดขวา | ลองมัน |
| W3-ปรับ | ขวาและข้อความชิดซ้าย | ลองมัน |
| W3 หน้าจอ-Container | ภาชนะสำหรับ W3-จอแสดงผลการเรียน (ตำแหน่ง: ญาติ) | ลองมัน |
| W3 หน้าจอ-ซ | เนื้อหาในตำแหน่งมุมบนซ้าย | ลองมัน |
| W3-การแสดงผลรายนามสมาชิก | เนื้อหาในตำแหน่งที่มุมขวาบน | ลองมัน |
| W3-แสดงผล bottomleft | เนื้อหาการดำรงตำแหน่งในมุมล่างซ้าย | ลองมัน |
| W3-แสดงผล bottomright | เนื้อหาในตำแหน่งมุมขวาล่าง | ลองมัน |
| W3 จอแสดงผลกลาง | เนื้อหาตำแหน่งที่อยู่ตรงกลาง (แนวตั้งและแนว) | ลองมัน |
| W3-แสดงผล topmiddle | เนื้อหาตำแหน่งที่อยู่ตรงกลางที่ด้านบนขององค์ประกอบ | ลองมัน |
| W3-แสดงผล bottommiddle | เนื้อหาตำแหน่งที่อยู่ตรงกลางที่ด้านล่างขององค์ประกอบ | ลองมัน |
| W3-serif | เปลี่ยนแบบอักษรที่จะ serif | ลองมัน |
| W3-ทึบ | เพิ่มความทึบแสงกับข้อความ | ลองมัน |
| เพิ่มความทึบองค์ประกอบใด ๆ | ลองมัน |
| W3 ซ้อนทับ | สร้างผลกระทบซ้อนทับ | ลองมัน |
| W3 ข้อความเงา | เพิ่มเงาให้กับข้อความ | ลองมัน |
เรียนสี
| ชั้น | กำหนด | |
|---|
| W3 แดง | สีพื้นหลังสีแดง | ลองมัน |
| W3 สีชมพู | สีพื้นหลังสีชมพู | ลองมัน |
| W3 ม่วง | สีพื้นหลังสีม่วง | ลองมัน |
| W3 ลึกสีม่วง | สีพื้นหลังสีม่วงเข้ม | ลองมัน |
| W3-คราม | สีครามสีพื้นหลัง | ลองมัน |
| W3 สีฟ้า | สีพื้นหลังสีฟ้า | ลองมัน |
| W3 แสงสีฟ้า | พื้นหลังสีฟ้าอ่อนสี | ลองมัน |
| W3-ฟ้า | สีพื้นหลังสีฟ้า | ลองมัน |
| W3-Aqua | Aqua สีพื้นหลัง | ลองมัน |
| W3-นกเป็ดน้ำ | นกเป็ดน้ำสีพื้นหลัง | ลองมัน |
| W3 เขียว | สีพื้นหลังสีเขียว | ลองมัน |
| W3 แสงสีเขียว | พื้นหลังสีเขียวอ่อนสี | ลองมัน |
| W3 มะนาว | มะนาวสีพื้นหลัง | ลองมัน |
| W3 ทราย | ทรายสีพื้นหลัง | ลองมัน |
| W3-สีกากี | สีกากีสีพื้นหลัง | ลองมัน |
| W3 สีเหลือง | สีพื้นหลังสีเหลือง | ลองมัน |
| W3-สีเหลืองอำพัน | สีพื้นหลังสีเหลืองอำพัน | ลองมัน |
| W3 ส้ม | สีพื้นหลังสีส้ม | ลองมัน |
| W3 ลึกส้ม | สีพื้นหลังสีส้มลึก | ลองมัน |
| W3-สีฟ้าเทา | สีพื้นหลังสีเทาอมฟ้า | ลองมัน |
| W3 น้ำตาล | สีน้ำตาลสีพื้นหลัง | ลองมัน |
| W3-แสงสีเทา | พื้นหลังสีเทาอ่อนสี | ลองมัน |
| W3 เทา | สีพื้นหลังสีเทา | ลองมัน |
| W3-สีเทาเข้ม | สีพื้นหลังสีเทาเข้ม | ลองมัน |
| W3 ดำ | สีพื้นหลังสีดำ | ลองมัน |
| W3-อ่อนสีแดง | สีพื้นหลังสีแดงอ่อน | ลองมัน |
| W3-ซีดเหลือง | สีพื้นหลังสีเหลืองอ่อน | ลองมัน |
| W3-เขียวซีด | สีพื้นหลังสีเขียวอ่อน | ลองมัน |
| W3-ซีดสีฟ้า | สีพื้นหลังสีฟ้าอ่อน | ลองมัน |
| W3 โปร่งใส | ใสสีพื้นหลัง | |
เรียนเลื่อน
สีทั้งหมดข้างต้นนอกจากนี้ยังสามารถนำมาใช้เป็นชั้นเรียนโฉบ:
| ชั้น | กำหนด | |
|---|
| W3-hover สีขาว | สีขาวเลื่อน | ลองมัน |
| W3-hover ดำ | เลื่อนสีดำ | ลองมัน |
| W3-hover แดง | สีแดงเลื่อน | ลองมัน |
| W3-hover สีฟ้า | สีฟ้าเลื่อน | ลองมัน |
| W3-hover เขียว | สีเขียวเลื่อน | ลองมัน |
| W3-hover-Aqua | Aqua สีเลื่อน | ลองมัน |
| W3-hover ส้ม | สีส้มเลื่อน | ลองมัน |
| W3-hover เทา | สีเทาเลื่อน | ลองมัน |
| W3-hover-เขียวซีด | สีเลื่อนสีเขียวอ่อน | ลองมัน |
| | |
| W3-hover ข้อความสีแดง | วางเมาส์สีแดงสีข้อความ | ลองมัน |
| W3-hover ข้อความสีแดง | วางเมาส์สีฟ้าสีข้อความ | ลองมัน |
| W3-hover ข้อความสีเขียว | วางเมาส์สีเขียวสีข้อความ | ลองมัน |
| W3-hover ข้อความสีม่วง | สีข้อความเลื่อนสีม่วง | ลองมัน |
| | |
| W3-hover-border- สี | สีเส้นขอบเลื่อน | ลองมัน |
| | |
| W3-hover-ทึบ | เพิ่มความโปร่งใสให้กับองค์ประกอบในโฮเวอร์ (มีความทึบ 60%) | ลองมัน |
| W3-hover เงา | เพิ่มเงาให้กับองค์ประกอบบนโฉบ | ลองมัน |
| W3-hover ไม่มีใคร | ขจัดผลกระทบโฉบจากองค์ประกอบ | ลองมัน |
เรียนรอบ
| ชั้น | กำหนด | |
|---|
| W3 รอบ | องค์ประกอบกลม (border-radius) 4px | ลองมัน |
| W3 รอบขนาดเล็ก | องค์ประกอบกลม (border-radius) 2px | ลองมัน |
| W3 รอบกลาง | องค์ประกอบกลม (border-radius) 4px | ลองมัน |
| W3 รอบขนาดใหญ่ | องค์ประกอบกลม (border-radius) 8px | ลองมัน |
| W3 รอบ XLarge | องค์ประกอบกลม (border-radius) 16px | ลองมัน |
| W3 รอบ xxlarge | องค์ประกอบกลม (border-radius) 32px | ลองมัน |
| W3 รอบจัมโบ้ | องค์ประกอบกลม (border-radius) 64px | ลองมัน |
เรียน padding
| ชั้น | กำหนด | |
|---|
| W3-padding-0 | เอาช่องว่างทั้งหมดจากองค์ประกอบ | ลองมัน |
| W3-padding | padding ด้านบนและด้านล่าง 8px และ 16px ซ้ายและขวา | ลองมัน |
| W3-padding-เล็ก ๆ | padding ด้านบนและด้านล่าง 2px และ 4px ซ้ายและขวา | ลองมัน |
| W3-padding-ขนาดเล็ก | padding ด้านบนและด้านล่าง 4px และ 8px ซ้ายและขวา | ลองมัน |
| W3-padding กลาง | padding ด้านบนและด้านล่าง 8px และ 16px ซ้ายและขวา | ลองมัน |
| W3-padding-ขนาดใหญ่ | padding ด้านบนและด้านล่าง 12px และ 24px ซ้ายและขวา | ลองมัน |
| W3-padding-XLarge | padding ด้านบนและด้านล่าง 16px และ 32px ซ้ายและขวา | ลองมัน |
| W3-padding-xxlarge | padding ด้านบนและด้านล่าง 24px และ 48px ซ้ายและขวา | ลองมัน |
| W3-padding-จัมโบ้ | padding ด้านบนและด้านล่าง 32px และ 64px ซ้ายและขวา | ลองมัน |
| W3-padding-ด้านบน | padding ด้านบน 8px | ลองมัน |
| W3-padding ขวา | padding 16px ขวา | ลองมัน |
| W3-padding-ด้านล่าง | 8px ล่าง padding | ลองมัน |
| W3-padding ซ้าย | padding 16px ซ้าย | ลองมัน |
| W3-padding-Hor-4 | padding ด้านบนและด้านล่าง 4px | ลองมัน |
| W3-padding-Hor-8 | padding ด้านบนและด้านล่าง 8px | ลองมัน |
| W3-padding-Hor-12 | padding ด้านบนและด้านล่าง 12px | ลองมัน |
| W3-padding-Hor-16 | padding ด้านบนและด้านล่าง 16px | ลองมัน |
| W3-padding-Hor-24 | padding ด้านบนและด้านล่าง 24px | ลองมัน |
| W3-padding-Hor-32 | padding ด้านบนและด้านล่าง 32px | ลองมัน |
| W3-padding-Hor-48 | padding ด้านบนและด้านล่าง 48px | ลองมัน |
| W3-padding-Hor-64 | padding ด้านบนและด้านล่าง 64px | ลองมัน |
| W3-padding-Hor-128 | padding 128px บนและด้านล่าง | ลองมัน |
| W3-padding-Ver-4 | padding ซ้ายและขวา 4px | ลองมัน |
| W3-padding-Ver-8 | padding ซ้ายและขวา 8px | ลองมัน |
| W3-padding-Ver-16 | padding 16px ซ้ายและขวา | ลองมัน |
| W3-padding-Ver-24 | padding 24px ซ้ายและขวา | ลองมัน |
| W3-padding-Ver-32 | padding 32px ซ้ายและขวา | ลองมัน |
| W3-padding-Ver-48 | padding 48px ซ้ายและขวา | ลองมัน |
| W3-padding-Ver-64 | padding 64px ซ้ายและขวา | ลองมัน |
เรียน Margin
| ชั้น | กำหนด | |
|---|
| W3 มีอัตรากำไร-0 | เอาอัตรากำไรทั้งหมดจากองค์ประกอบ | ลองมัน |
| W3 มีอัตรากำไร | 16px Margin | ลองมัน |
| W3-ขอบด้านบน | ขอบบน 16px | ลองมัน |
| W3 ขอบขวา | Margin 16px ขวา | ลองมัน |
| W3-margin ล่าง | 16px ขอบด้านล่าง | ลองมัน |
| W3 ขอบซ้าย | Margin 16px ซ้าย | ลองมัน |
เรียนชายแดน
| ชั้น | กำหนด | |
|---|
| W3 พรมแดน | พรมแดน (บนขวาล่างซ้าย) | ลองมัน |
| W3 พรมแดนด้านบน | ด้านบนชายแดน | ลองมัน |
| W3 พรมแดนขวา | ขวาชายแดน | ลองมัน |
| W3-ขอบล่าง | ด้านล่างชายแดน | ลองมัน |
| W3 พรมแดนซ้าย | ขอบซ้าย | ลองมัน |
| W3 พรมแดน-0 | เอาเส้นขอบทั้งหมด | ลองมัน |
| สี W3-border- | แสดงเส้นเขตแดนที่กำหนดใด ๆ ในสีที่ระบุ (เช่นสีแดง, ฯลฯ ) | ลองมัน |
| W3-BottomBar | เพิ่มขอบด้านล่างหนา (บาร์) เพื่อองค์ประกอบ | ลองมัน |
| W3-leftbar | เพิ่มความหนาขอบซ้าย (บาร์) เพื่อองค์ประกอบ | ลองมัน |
| W3-rightbar | เพิ่มเส้นขอบด้านขวาหนา (บาร์) เพื่อองค์ประกอบ | ลองมัน |
| W3-topbar | เพิ่มเส้นขอบด้านบนหนา (บาร์) เพื่อองค์ประกอบ | ลองมัน |
| W3-hover-border- สี | สีเส้นขอบ Hoverable | ลองมัน |