เครื่องมือสร้าง border-radius ของ CSS

ลำดับของรูปแบบเขียนย่อ

border-radius: top-left top-right bottom-right bottom-left;

เหมือนกับ margin / padding คือ ตามเข็มนาฬิกาโดยเริ่มจากมุมบนซ้าย ค่าที่ละไว้จะสะท้อนมุมตรงข้าม ดังนั้น border-radius: 10px 20px; จึงหมายถึง 10px ที่มุมบนซ้ายและมุมล่างขวา และ 20px ที่มุมบนขวาและมุมล่างซ้าย

สิ่งที่เครื่องมือนี้ไม่ได้สร้าง

เครื่องมือนี้กำหนดรัศมีหนึ่งค่าต่อมุม ดังนั้นจึงไม่สร้างมุมแบบวงรี (รูปแบบสองค่าที่มีเครื่องหมายทับ เช่น border-radius: 20px 10px / 5px 15px;) หรือคุณสมบัติแบบแยกเขียน เช่น border-top-left-radius หากจำเป็นต้องใช้ ให้เขียน CSS ด้วยมือ

เปอร์เซ็นต์เทียบกับพิกเซล

50% บนองค์ประกอบสี่เหลี่ยมจัตุรัส = วงกลม ส่วนบนสี่เหลี่ยมผืนผ้าขนาด 200×100 นั้น 50% = รัศมีแนวนอน 100px บวกรัศมีแนวตั้ง 50px = วงรี

รูปทรงที่พบบ่อย

กฎ “ครึ่งหนึ่งของความสูง” สำหรับปุ่มทรงแคปซูล

ปุ่มทรงแคปซูล (pill) คือสี่เหลี่ยมผืนผ้าที่ปลายด้านซ้ายและขวาเป็นครึ่งวงกลมที่สมบูรณ์ เพื่อให้ได้ผลแบบนี้อย่างแน่นอน ให้ตั้งค่า border-radius ไว้ที่ อย่างน้อยครึ่งหนึ่งของความสูงขององค์ประกอบ การใช้ 9999px (หรือค่าที่ใหญ่มาก ๆ) นั้นปลอดภัย เพราะเบราว์เซอร์จะจำกัดรัศมีให้พอดีกับรูปทรงจริง

การทำงานร่วมกับ overflow

โดยค่าเริ่มต้น border-radius จะตัดเฉพาะพื้นหลัง เส้นขอบ และเงาของกล่องเท่านั้น หากต้องการตัดองค์ประกอบลูก (รูปภาพ องค์ประกอบที่ซ้อนกัน) ให้เข้ากับรูปทรงโค้ง ให้เพิ่ม:

overflow: hidden;

หรือใช้ isolation: isolate + overflow: hidden เพื่อจำกัดบริบทการซ้อนชั้น (stacking contexts) ไว้ด้วย

หมายเหตุด้านการเข้าถึง (accessibility)

ตัว border-radius เองไม่มีปัญหาด้านการเข้าถึง แต่การโค้งมุมมากเกินไปบนองค์ประกอบเชิงโต้ตอบ (ปุ่มแคปซูล ชิป) ไม่ควรทำให้พื้นที่สำหรับการแตะเล็กลง ไม่ว่าจะโค้งมุมแบบใด ปุ่มควรมีขนาดอย่างน้อย 44×44px (ตามคำแนะนำของ WCAG)