ดูตัวอย่างมุมมน

ใช้ border-radius: 50% กับองค์ประกอบสี่เหลี่ยมจัตุรัสเพื่อสร้างวงกลมสมบูรณ์ ตั้งค่าทั้งสี่มุมเป็น 50%

ได้ border-radius สามารถมีสี่ค่าแยกกันตามลำดับ: top-left, top-right, bottom-right, bottom-left ทำให้สร้างรูปทรงไม่สมมาตรที่เป็นเอกลักษณ์ได้

หกถึงสิบสองพิกเซลสำหรับปุ่ม และแปดถึงสิบหกพิกเซลสำหรับการ์ด ใช้ได้ดีกับอินเทอร์เฟซส่วนใหญ่ สิ่งที่สำคัญกว่าตัวเลขที่แน่นอนคือความสม่ำเสมอ หากปุ่มกับช่องกรอกข้อมูลในหน้าจอเดียวกันมีความมนต่างกัน งานก็จะดูไม่เป็นระเบียบ และเมื่อมีภาพอยู่ภายในการ์ด ควรให้รัศมีขององค์ประกอบด้านในเล็กกว่าด้านนอกเล็กน้อย มิฉะนั้นเส้นโค้งทั้งสองจะดูขัดกันอย่างชัดเจน

ค่า 50% หมายถึง "ครึ่งหนึ่งของแต่ละด้าน" ดังนั้นถ้าองค์ประกอบไม่ใช่สี่เหลี่ยมจัตุรัส รัศมีแนวนอนกับแนวตั้งจะต่างกันและได้วงรีออกมา หากต้องการวงกลมจริง ให้กำหนด width และ height ให้เท่ากัน หรือเพิ่ม aspect-ratio: 1 และหากอยากได้ทรงแคปซูลกับปุ่มที่ความกว้างเปลี่ยนตามข้อความ ให้ใช้ค่าคงที่ใหญ่ ๆ อย่าง 9999px แทน 50% ปลายทั้งสองข้างก็จะเป็นครึ่งวงกลมสมบูรณ์ตามความสูงเสมอ