ตัวสร้าง CSS Border Radius
สร้าง border-radius ของ CSS แบบเห็นภาพพร้อมตัวอย่างสด และคัดลอกโค้ดที่พร้อมใช้งานจริง
border-radius: —;
เป็นส่วนตัว 100% — ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด
เกี่ยวกับ ตัวสร้าง CSS Border Radius
CSS Border Radius Generator สร้างได้ทุกอย่างตั้งแต่การ์ดขอบมนนุ่มนวลไปจนถึงรูปทรงบล็อบแบบอินทรีย์ ลากที่จับมุมโดยตรงบนพรีวิว หรือกำหนดแต่ละมุมเป็นตัวเลข — รวมถึงไวยากรณ์แปดค่าเต็มรูปแบบ ที่แต่ละมุมมีรัศมีแนวนอนและแนวตั้งแยกกัน แกนที่สองนี้เองที่ปลดล็อกรูปทรงไข่ ใบไม้ หยดน้ำ และบล็อบ
ปุ่มสลับล็อกมุมช่วยให้ทั้งสี่มุมซิงค์กันเพื่อความมนแบบสม่ำเสมอ ส่วนการปลดล็อกจะปลดปล่อยให้แต่ละมุมสร้างรูปทรงไม่สมมาตรได้อิสระ พรีเซ็ตสิบสองแบบ — rounded, pill, circle, squircle, บล็อบสองแบบ, leaf, egg, arch, teardrop, petal และ wave — สาธิตให้เห็นว่าคุณสมบัตินี้ทำอะไรได้บ้าง และปุ่มสุ่มจะสร้างรูปทรงอินทรีย์ใหม่ ๆ ได้ไม่รู้จบ
คุณสามารถเปลี่ยนหน่วย เปลี่ยนสีองค์ประกอบและแคนวาสให้เข้ากับดีไซน์ และคัดลอกค่า border-radius เปล่า ๆ หรือกฎ CSS แบบเต็ม เครื่องมือนี้ทำงานฝั่งไคลเอ็นต์ 100% — ไม่มีการอัปโหลดใด ๆ
วิธีใช้ ตัวสร้าง CSS Border Radius
- ลากที่จับมุมบนพรีวิว หรือปิด “Link all corners” เพื่อแก้ไขแต่ละมุมแยกกัน
- ตั้งค่ารัศมีแนวนอนและแนวตั้งของแต่ละมุมเพื่อสร้างรูปทรงบล็อบแบบอินทรีย์
- เลือกหน่วยและปรับสีองค์ประกอบกับพื้นหลังเพื่อดูตัวอย่างในบริบทจริง
- ลองใช้พรีเซ็ต — pill, squircle, blob, leaf, teardrop และอื่น ๆ — หรือกดสุ่ม
- คัดลอกค่า border-radius หรือ CSS แบบสมบูรณ์