เครื่องมือสร้าง CSS Border Radius — มุมโค้งรายมุมและวงรี พร้อมดูตัวอย่างสด

เครื่องมือนี้ทำอะไร

เครื่องมือสร้าง border radius ช่วยให้คุณปรับมุมโค้งด้วยภาพและคัดลอก CSS ที่สั้นที่สุด ใช้รัศมีเดียวกับทุกมุมหรือแยกแต่ละมุม เปิดมุมวงรีเพื่อให้แต่ละมุมมีรัศมีแนวนอนและแนวตั้งของตัวเอง แล้วดูตัวอย่างเปลี่ยนไปขณะลาก รองรับ px, %, rem และ em และวางค่า border-radius ที่มีอยู่เพื่อแก้ไขได้ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ

วิธีใช้

เริ่มจากพรีเซ็ตหรือใช้รูปทรงตัวอย่าง
เลือก หน่วย การเปลี่ยนหน่วยจะแปลงค่าปัจจุบัน (rem และ em คิดเป็น 16px ส่วน % อิงกับกล่องตัวอย่าง)
เปิด รัศมีเท่ากันทุกมุม เพื่อใช้แถบเลื่อนเดียว หรือปิดเพื่อตั้ง บนซ้าย บนขวา ล่างขวา และ ล่างซ้าย แยกกัน
เปิด มุมวงรี เพื่อให้แต่ละมุมมีแถบเลื่อน แนวนอน และ แนวตั้ง
ปรับขนาดตัวอย่างด้วย ความกว้าง และ ความสูง แล้วคัดลอกโค้ดจากการ์ด CSS เปิดเอาต์พุตแบบ longhand หากต้องการสี่พร็อพเพอร์ตีแยกกัน

ตัวอย่าง

.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

ควรรู้

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

คำถามที่พบบ่อย

› เครื่องหมายทับใน border-radius หมายถึงอะไร?

ค่าก่อนเครื่องหมายทับคือรัศมีแนวนอน ค่าหลังคือรัศมีแนวตั้ง เมื่อสองค่าต่างกัน มุมจะเป็นหนึ่งในสี่ของวงรีแทนวงกลม เช่น 50% / 30% ให้เส้นโค้งที่แบนกว่า 50%

› สี่มุมเขียนเรียงตามลำดับใด?

ตามเข็มนาฬิกาเริ่มจากบนซ้าย: บนซ้าย บนขวา ล่างขวา ล่างซ้าย ถ้าค่าน้อยกว่าสี่ค่า CSS จะใช้ซ้ำ: สองค่ากำหนดบนซ้าย/ล่างขวา และบนขวา/ล่างซ้าย สามค่ากำหนดบนซ้าย บนขวา/ล่างซ้าย และล่างขวา

› ทำวงกลมหรือรูปแคปซูลอย่างไร?

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

› รูปทรง blob ทำอย่างไร?

blob ใช้เปอร์เซ็นต์ต่างกันแปดค่า คือรัศมีแนวนอนสี่ค่าและแนวตั้งสี่ค่า เช่น 30% 70% 70% 30% / 30% 30% 70% 70% เลือกพรีเซ็ต blob เปิด มุมวงรี แล้วลากแถบเลื่อนของแต่ละมุมเพื่อปรับรูปทรง