สร้าง border radius

ทำงานอย่างไร

border-radius ง่ายจนกว่าคุณจะต้องการให้สามมุมโค้งและหนึ่งมุมเหลี่ยม ซึ่งตอนนั้นทุกคนต้องไปค้นลำดับของค่าทั้งสี่

ลำดับ ฉบับจำให้ขึ้นใจ

บนซ้าย บนขวา ล่างขวา ล่างซ้าย ตามเข็มนาฬิกาเริ่มจากบนซ้าย ลำดับตามเข็มนาฬิกาจากบนซ้ายเดียวกันนี้ใช้กับรูปแบบย่อของ margin, padding และ border ด้วย ซึ่งควรจำไว้ครั้งเดียว

พิกเซลหรือเปอร์เซ็นต์

พิกเซลให้ความโค้งเท่ากันไม่ว่าองค์ประกอบจะมีขนาดเท่าใด เปอร์เซ็นต์สัมพันธ์กับความกว้างและความสูงขององค์ประกอบเอง ความโค้งจึงปรับตามขนาด และรัศมี 50% บนสี่เหลี่ยมจัตุรัสให้วงกลมสมบูรณ์ ซึ่งเป็นเทคนิคมาตรฐานสำหรับอวตารกลม

ทรงเม็ดยา

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

เมื่อมุมดูผิดปกติในองค์ประกอบที่ซ้อนกัน

กล่องโค้งที่อยู่ในกล่องโค้งอีกใบต้องใช้รัศมีที่เล็กกว่าสำหรับกล่องด้านใน โดยลดลงตามระยะ padding ระหว่างกัน ไม่เช่นนั้นเส้นโค้งจะไม่อยู่ร่วมศูนย์กัน เป็นรายละเอียดเล็ก ๆ ที่ทำให้การ์ดดูเป็นงานที่ทำมาอย่างดี