สร้างขอบโค้งมน CSSคืออะไร?

สร้างขอบโค้งมน CSS ออนไลน์ฟรี ปรับรัศมีของทั้งสี่มุมด้วยตัวควบคุมภาพ

คุณสมบัติ CSS border-radius ควบคุมความกลมของมุมองค์ประกอบ และความอเนกประสงค์ของมันขยายไกลเกินกว่าสี่เหลี่ยมมุมมนธรรมดา ด้วยการปรับแต่ละมุมอย่างอิสระ คุณสามารถสร้างทรงแคปซูล วงกลม รูปร่างไม่สมมาตร และรูปทรงออร์แกนิกที่ซับซ้อนได้ ด้วยคุณสมบัติ CSS เพียงตัวเดียว CSS Border Radius Generator ให้การควบคุมแถบเลื่อนรายมุมสำหรับทั้งสี่มุมพร้อมตัวอย่างสดที่อัปเดตทันที

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

พรีเซ็ตสี่แบบครอบคลุมกรณีการใช้งานที่พบบ่อยที่สุด Circle สร้าง border-radius: 50% สำหรับวงกลมสมบูรณ์ (หรือวงรีบนองค์ประกอบที่ไม่เป็นสี่เหลี่ยม) Pill สร้างรูปทรงที่มีปลายมนเต็มที่ (border-radius: 9999px) มีประโยชน์สำหรับป้ายและแท็กบนปุ่ม Card ใช้การมน 8px แบบนุ่มนวลเหมาะสำหรับคอมโพเนนต์การ์ดและคอนเทนเนอร์ Rounded ใช้การมน 8px ทุกมุม เหมาะสำหรับปุ่มและอินพุตฟอร์ม

โค้ด CSS ที่สร้างขึ้นแสดงไวยากรณ์แบบย่อ หากทั้งสี่มุมมีค่าเท่ากัน จะแสดงค่าเดียว (เช่น border-radius: 8px) หากมุมต่างกัน จะแสดงไวยากรณ์สี่ค่าตามลำดับตามเข็มนาฬิกา (ซ้ายบน ขวาบน ขวาล่าง ซ้ายล่าง) โค้ดพร้อมคัดลอกสำหรับสไตล์ชีตของคุณ