ประเด็นสำคัญ
- 01สามโหมด — สม่ำเสมอ ต่อมุม และวงรี — ครอบคลุมทุกอย่างตั้งแต่ปุ่มมุมกลมธรรมดาไปจนถึงรูปทรง blob อินทรีย์
- 02รองรับหน่วย px, %, และ rem โดยแต่ละหน่วยมีพฤติกรรมการปรับขนาดที่แตกต่าง
- 03โหมดวงรีแสดง radius แนวนอนและแนวตั้งต่อมุมสำหรับไวยากรณ์ border-radius แบบเต็มของ CSS
- 04ตัวแสดงตัวอย่างแบบสดใช้คุณสมบัติ CSS จริง ดังนั้นสิ่งที่คุณเห็นคือสิ่งที่เบราว์เซอร์ของคุณจะแสดงผลอย่างแน่นอน
จากมุมกลมแบบง่ายไปจนถึงรูปทรง Blob อินทรีย์
ค่า border-radius สี่มุมนั้นง่ายต่อการพิมพ์จากความจำ — border-radius: 8px แต่เมื่อคุณต้องการ radius ต่างกันต่อมุม หรือคุณต้องการไวยากรณ์วงรี CSS สำหรับรูปทรงอินทรีย์ shorthand จะกลายเป็นสิ่งที่บ้านนอกเร็ว รูปแบบเต็มคือ top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — แปดค่าในลำดับที่กำหนด
ตัวสร้าง border-radius ของ Handytool ให้คุณลากเลื่อนสำหรับแต่ละมุมในโหมดใดก็ได้และดูรูปทรงอัปเดตแบบสด สลับระหว่าง px, %, และ rem โดยไม่ต้องคำนวณใหม่ และคัดลอก shorthand ที่ถูกต้องหรือการประกาศ CSS แบบยาวเมื่อเสร็จสิ้น
วิธีออกแบบ Border Radius
- 01
เลือกโหมด
โหมดสม่ำเสมอใช้ radius หนึ่งกับทั้งสี่มุม โหมดต่อมุมควบคุมแต่ละมุมอย่างอิสระ โหมดวงรีเพิ่ม radius แนวนอนและแนวตั้งแยกต่อมุม
- 02
เลือกหน่วย
เลือก px สำหรับขนาดสัมบูรณ์ % สำหรับค่าที่ปรับขนาดตามขนาดขององค์ประกอบ หรือ rem สำหรับขนาดที่เกี่ยวข้องกับขนาดฟอนต์รูท
- 03
ลากเลื่อน
ปรับค่า radius และดูองค์ประกอบตัวแสดงตัวอย่างอัปเดตแบบสด สำหรับโหมดต่อมุม ลากเลื่อนของแต่ละมุมอย่างอิสระ
- 04
ตัวอย่างรูปทรง
กล่องตัวแสดงตัวอย่างใช้คุณสมบัติ CSS border-radius จริง ดังนั้นรูปทรงที่คุณเห็นคือรูปทรงที่เบราว์เซอร์ของคุณจะแสดงผล
- 05
คัดลอก CSS
คลิกคัดลอกเพื่อรับการประกาศ border-radius และวางลงในชีตสไตล์ของคุณ
รูปทรงทั่วไปและเวลาที่ใช้แต่ละโหมด
- 01ปุ่มเม็ด: โหมด % สม่ำเสมอ ตั้งเป็น 50% — เป็นเม็ดเต็มเสมอโดยไม่คำนึงถึงความกว้างของปุ่ม
- 02การ์ดที่มีการปัดเศษเล็กน้อย: โหมด px สม่ำเสมอ 8–16px — รูปแบบ UI ที่พบบ่อยที่สุด
- 03แท็กหรือป้ายกำกับแบบไม่สมมาตร: โหมดต่อมุม คมชัดด้านหนึ่ง มนโค้งด้านอื่น
- 04วงกลมอวาตาร์: โหมด % สม่ำเสมอ 50% — ปรับขนาดตามคอนเทนเนอร์รูปภาพ
- 05รูปทรง blob อินทรีย์: โหมดวงรีที่มีค่า X/Y ต่างกันต่อมุม
ตัวแสดงตัวอย่างทันที ไม่มีการอัปโหลด
ตัวสร้าง border-radius ทั้งหมดอยู่ฝั่งไคลเอนต์ เลื่อน สวิตช์โหมด และการเปลี่ยนแปลงหน่วยทั้งหมดอัปเดตตัวแสดงตัวอย่างทันทีโดยไม่มีการเดินทางไปรอบเซิร์ฟเวอร์ ไม่มีบัญชีและไม่มีขีดจำกัดอัตรา
เครื่องมือนี้ทำงานบนเบราว์เซอร์สมัยใหม่ทั้งหมด คุณสมบัติ border-radius — รวมถึงไวยากรณ์วงรี X/Y — ได้รับการสนับสนุนในเวอร์ชัน evergreen ทั้งหมดของ Safari, Firefox, Edge และ Chrome ดังนั้นผลลัพธ์จึงปลอดภัยต่อการใช้โดยไม่มี vendor prefixes หรือ fallbacks
Border-Radius Generator FAQ
ความแตกต่างระหว่าง px และ % สำหรับ border-radius คืออะไร?
Radius ของพิกเซลนั้นสัมบูรณ์ — 16px เสมอ 16px Radius เปอร์เซ็นต์นั้นสัมพัทธ์กับขนาดขององค์ประกอบ ดังนั้น 50% สร้างวงกลมสมบูรณ์บนกล่องสี่เหลี่ยมและวงรีบนสี่เหลี่ยม
เมื่อไหร่ที่ฉันควรใช้โหมดวงรี?
ใช้โหมดวงรีเมื่อคุณต้องการมุมที่บวมขึ้นมากกว่าแกนหนึ่ง — สำหรับเม็ดแนวนอน รูปทรงใบ หรือ blob อินทรีย์ CSS แสดงนี่เป็น X-radii / Y-radii ในไวยากรณ์ shorthand border-radius
เหตุใดรัศมีเปอร์เซ็นต์ของฉันดูผิดบนกล่องที่ไม่ใช่สี่เหลี่ยม?
เปอร์เซ็นต์แนวนอนสัมพัทธ์กับความกว้างขององค์ประกอบ เปอร์เซ็นต์แนวตั้งต่อความสูง บนองค์ประกอบที่กว้างและสั้น มุมจะยืดเข้าไปในส่วนโค้งวงรีแทนที่จะเป็นส่วนโค้งวงกลม
ผลลัพธ์นี้ทำงานในทุกเบราว์เซอร์หรือไม่?
ใช่ — border-radius รวมถึงไวยากรณ์วงรีได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมด: เวอร์ชัน evergreen ทั้งหมดของ Safari, Firefox, Edge และ Chrome ไม่จำเป็นต้องมี vendor prefixes
ฉันสร้างวงกลมสมบูรณ์ด้วย border-radius ได้อย่างไร?
ตั้งค่ามุมทั้งหมดเป็น 50% ในโหมดเปอร์เซ็นต์บนองค์ประกอบสี่เหลี่ยม องค์ประกอบยังต้องมีความกว้างและความสูงเท่ากัน — ใช้ aspect-ratio: 1 / 1 หากขนาดนั้นไดนามิก