เครื่องมือสร้าง Border Radius
ออกแบบ CSS border-radius ผ่านภาพ: สไลเดอร์อิสระสี่ตัวสำหรับแต่ละมุมในหน่วย px หรือเปอร์เซ็นต์, ทางลัดเชื่อมทุกมุมเพื่อสร้างวงกลมและทรงยาเม็ดได้ในทันที พร้อมโหมด Blob ออร์แกนิกที่มีรูปทรงแบบสุ่ม
🔒 ประมวลผลทั้งหมดในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดสิ่งใดที่คุณป้อนที่นี่
ผลลัพธ์
การประกาศค่า border-radius สามารถรับค่ามุมอิสระได้สูงสุดสี่ค่าบวกกับ syntax เครื่องหมายทับแปดค่าทางเลือกสำหรับเส้นโค้งออร์แกนิก — มีส่วนที่เคลื่อนไหวมากกว่าที่คนส่วนใหญ่คิดจนกว่าพวกเขาต้องการอะไรที่มากกว่าการ์ดมนๆ ธรรมดา เครื่องมือสร้างนี้นำทุกส่วนเหล่านั้นมาแสดงบนหน้าจอ: สไลเดอร์สี่มุมพร้อมหน่วย px หรือเปอร์เซ็นต์ของตัวเอง, ทางลัดเชื่อมทุกมุมสำหรับรูปทรงสมมาตร และโหมด Blob สำหรับรูปทรงที่ค่ารัศมีเดี่ยวไม่สามารถแสดงออกได้
โหมด Corners ครอบคลุมรูปทรงที่ผู้คนต้องการใช้จริง: เชื่อมทุกมุมเข้ากับสไลเดอร์เดียวเพื่อวงกลมสมบูรณ์, รูปทรงยาเม็ด และ Squircles หรือยกเลิกการเชื่อมเพื่อให้มนเฉพาะด้านบนของแผง dropdown หรือเพียงด้านเดียวของการ์ด ตัวอย่างพื้นหลังตารางหมากรุกด้านหลังรูปทรง ซึ่งสลับระหว่างฉากหลังสีอ่อนและเข้มได้ ทำให้เห็นชัดเจนว่ามุมไหนถูกตัดออกที่รัศมีใด — เป็นเทคนิคทางภาพเดียวกับที่เครื่องมือไฟล์บนเว็บนี้ใช้แสดงความโปร่งใส
โหมด Blob คืออีกครึ่งหนึ่ง: syntax เครื่องหมายทับแปดค่าของ CSS ทำให้รัศมีแนวนอนและแนวตั้งของแต่ละมุมแตกต่างกันได้ ซึ่งเป็นสิ่งที่เปลี่ยนสี่เหลี่ยมผืนผ้ามนให้กลายเป็นเส้นขอบออร์แกนิกที่ไม่สม่ำเสมอ กดสุ่มเพื่อรูปทรงใหม่เมื่อใดก็ได้และคัดลอก CSS ที่แน่นอนเบื้องหลัง — ไม่ต้องมีการ export SVG หรือ library ภายนอกใดๆ หน้า Preset ครอบคลุมคำขอที่ผู้คนพิมพ์ลงในช่องค้นหาจริงๆ: วงกลมสมบูรณ์, ปุ่มรูปทรงยาเม็ดสนามกีฬา, Squircle สไตล์ iOS และ Blob ออร์แกนิกสำเร็จรูป
เช่นเดียวกับทุกเครื่องมือบนเว็บนี้ มันทำงานทั้งหมดในเบราว์เซอร์ของคุณ: ไม่มีการอัปโหลด ไม่มีบัญชี และเครื่องมือสร้างยังคงทำงานแบบออฟไลน์ได้เมื่อโหลดหน้าเว็บแล้ว