ตัวสร้าง CSS Border Radius
ออกแบบ border-radius แบบภาพและรับโค้ด CSS พร้อมใช้
ตัวควบคุม Border Radius
ตัวอย่างสด
ผลลัพธ์ CSS
ตัวอย่างการใช้งาน
วงกลมสมบูรณ์แบบ
สร้างองค์ประกอบกลมสมบูรณ์แบบด้วย border radius 50% ทุกมุม
รูปทรงแคปซูล
ออกแบบปุ่มรูปทรงแคปซูลด้วยค่า border radius แนวนอนขนาดใหญ่
รูปทรงอินทรีย์
สร้างรูปทรงอินทรีย์ที่ไม่เหมือนใครโดยตั้งค่าต่างกันในแต่ละมุม
คุณสมบัติ
ตัวอย่างภาพสด
ดูเอฟเฟกต์ border radius อัปเดตแบบเรียลไทม์ขณะปรับตัวเลื่อน
ควบคุมมุมแต่ละมุม
ปรับแต่ละมุมแยกกันหรือเชื่อมทั้งหมดสำหรับ border radius สม่ำเสมอ
รูปทรงสำเร็จรูป
เข้าถึงรูปทรงทั่วไปได้อย่างรวดเร็ว เช่น วงกลม แคปซูล สี่เหลี่ยมโค้ง และกำหนดเอง
ความเป็นส่วนตัวมาก่อน
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ใดๆ
วิธีใช้?
ปรับมุม
ใช้ตัวเลื่อนเพื่อตั้งค่า border radius สำหรับแต่ละมุม หรือสลับโหมดเชื่อมสำหรับค่าสม่ำเสมอ
ดูตัวอย่างรูปทรง
ชมกล่องตัวอย่างสดอัปเดตทันทีเมื่อคุณเปลี่ยนค่ารัศมี
คัดลอก CSS
คลิกปุ่มคัดลอก CSS เพื่อคัดลอกโค้ด border-radius ที่สร้างขึ้นไปยังคลิปบอร์ด
คำถามที่พบบ่อย
เครื่องมือนี้ทำอะไรได้บ้าง?
ตัวสร้าง border-radius นี้ช่วยให้คุณออกแบบมุมโค้งสำหรับองค์ประกอบ CSS แบบเห็นภาพ ลากตัวเลื่อน ดูตัวอย่างอัปเดตแบบเรียลไทม์ และคัดลอกโค้ด CSS ที่สร้างขึ้นด้วยคลิกเดียว ไม่ต้องเดาค่าพิกเซลในสไตล์ชีตอีกต่อไป
border-radius ทำงานอย่างไรใน CSS
คุณสมบัติ CSS border-radius รับค่าเป็นพิกเซล เปอร์เซ็นต์ หรือ em สำหรับแต่ละมุม คุณสามารถตั้งทั้ง 4 มุมพร้อมกันด้วยรูปแบบย่อ (border-radius: 10px) หรือควบคุมแต่ละมุมแยกกัน เปอร์เซ็นต์สัมพันธ์กับขนาดขององค์ประกอบ จึงทำให้ 50% บนสี่เหลี่ยมจัตุรัสสร้างวงกลม
รูปทรงสำเร็จรูปและการออกแบบแบบกำหนดเอง
เริ่มต้นอย่างรวดเร็วด้วยพรีเซ็ตสำหรับวงกลม แคปซูล และสี่เหลี่ยมมุมโค้ง หรือลองใส่ค่าไม่สมมาตรในแต่ละมุมเพื่อสร้างรูปทรงออร์แกนิกที่กำลังเป็นที่นิยมในการออกแบบ UI สมัยใหม่
ใช้ได้กับทุกเบราว์เซอร์สมัยใหม่
คุณสมบัติ border-radius รองรับโดย Chrome, Firefox, Safari และ Edge ไวยากรณ์แบบย่อที่สร้างโดยเครื่องมือนี้เป็นรูปแบบที่เข้ากันได้มากที่สุด คุณสามารถวางลงในโปรเจกต์ได้ทันทีโดยไม่ต้องใส่ vendor prefix