เครื่องกำเนิดรูปร่าง Pill / Stadium ของ CSS
ออกแบบรัศมีเส้นขอบ CSS ด้วยสายตา: แถบเลื่อนมุมอิสระสี่ตัวในหน่วย px หรือเปอร์เซ็นต์ ทางลัดสำหรับลิงก์ทุกมุมสำหรับแวดวงและเม็ดยาทันที รวมถึงโหมด Blob แบบออร์แกนิกที่มีรูปร่างแบบสุ่ม
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างรัศมีเส้นขอบโดยเชื่อมโยงทั้งสี่มุมและดันให้มีรัศมีใหญ่มาก: 999px บนสี่เหลี่ยมขนาดเท่าปุ่มทั่วไป รัศมีที่มากจะถูกเบราว์เซอร์ตัดให้เหลือเพียงครึ่งหนึ่งของความสูงของกล่องพอดี ซึ่งเป็นสิ่งที่ทำให้เกิดรูปทรงเม็ดยาหรือสนามกีฬาที่โค้งมนเต็มที่ แทนที่จะเป็นสี่เหลี่ยมจัตุรัสที่มีมุมโค้งมนเล็กน้อย
นี่คือเหตุผลว่าทำไมปุ่มเม็ดยาจึงไม่จำเป็นต้องมีค่ารัศมีที่แม่นยำซึ่งปรับให้เหมาะกับความสูงของปุ่มแต่ละปุ่ม - จำนวนใดๆ ที่มากกว่าครึ่งของความสูงอย่างสบายๆ จะให้ผลลัพธ์ที่ถูกตัดเหมือนกัน ซึ่งเป็นเหตุผลว่าทำไม 999px (หรือแม้แต่ 9999px) จึงกลายเป็นชุมชนที่ไม่เป็นทางการสำหรับ 'round this all the way' ใน CSS
ปรับขนาดกล่องตามเลย์เอาต์ของคุณเอง และขนาด 999px เดิมจะยังคงสร้างเม็ดยาเต็มทุกความสูงเท่าใดก็ได้ เนื่องจากเบราว์เซอร์จะคลิปลงครึ่งหนึ่งของกล่องโดยอัตโนมัติ คัดลอก CSS เมื่อดูถูกต้องแล้ว หรือยกเลิกการเชื่อมโยงมุมเพื่อสร้างแคปซูลที่ไม่สมมาตรแทน