ข้ามไปยังเนื้อหาหลัก
LibraTool logoLibraTool

สร้าง CSS Border Radius ฟรี

ออกแบบมุมโค้งแบบ visual พร้อมควบคุมแต่ละมุมอย่างอิสระ รองรับไวยากรณ์ X/Y แบบวงรีสำหรับรูปทรงอินทรีย์

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว
border-radius: 20px 20px 20px 20px;
หน่วย

การใช้งานทั่วไป

  • รูปร่าง Blob แบบอินทรีย์ใช้ไวยากรณ์วงรี X/Y เพื่อสร้างรูปร่าง blob ที่เป็นเอกลักษณ์สำหรับส่วน hero และภาพประกอบ
  • มุมการ์ดและคอนเทนเนอร์มุมที่มนไปตามมาตรฐานสำหรับการ์ด คอนเทนเนอร์ และแผงในการออกแบบ UI สมัยใหม่
  • รูปร่าง Avatar และรูปถ่ายโปรไฟล์สร้างรูปแบบมุมที่เหมาะสมสำหรับรูปถ่ายโปรไฟล์: วงกลม squircle หรือสี่เหลี่ยมจัตุรัสโค้ง
  • ยา สัญลักษณ์ และตราสัญลักษณ์สร้างปุ่มยา สัญลักษณ์ และตราสัญลักษณ์ที่มนไปอย่างสมบูรณ์แบบโดยใช้ preset 9999
  • การออกแบบมุมไม่สมมาตรผสมรัศมีข้ามมุมเพื่อสร้างรูปร่างการ์ดและปุ่มที่โดดเด่นและรู้จักแบรนด์

วิธีการทำงาน

ตัวสร้าง border-radius ทำงานในเบราว์เซอร์ทั้งหมด — ไม่มีเซิร์ฟเวอร์ ไม่มีไลบรารี และไม่มีการอัปโหลด สร้างสตริงค่า CSS border-radius โดยตรงใน JavaScript ด้วย React state และ useMemo แล้วใช้เป็น inline style บน div สด เอนจิน CSS ของเบราว์เซอร์จึงเรนเดอร์รูปทรงแบบเรียลไทม์

  1. 1
    แถบเลื่อนเขียน state
    อินพุต range แต่ละตัวเขียนไปยังตัวแปร state ตัวเลขหนึ่งในแปดตัว — รัศมีมุมแนวนอนสี่ค่าและแนวตั้งสี่ค่าสำหรับโหมดวงรี โหมดรวมจะรวมทั้งแปดค่าเป็นแถบเลื่อนเดียวผ่านตัวช่วย setAll ที่ซิงค์ทุกค่าพร้อมกัน
  2. 2
    useMemo ประกอบค่า CSS
    useMemo hook คำนวณสตริง border-radius ใหม่ทุกครั้งที่ค่ามุม หน่วย (px หรือ %) หรือสวิตช์วงรีเปลี่ยน ในโหมดมาตรฐานจะสร้างรูปย่อสี่ค่า เมื่อเปิดวงรีจะเพิ่มตัวคั่นทับสำหรับไวยากรณ์เต็มแปดค่า — เช่น 32px 20px 20px 32px / 20px 32px 20px 32px
  3. 3
    เอนจิน CSS ของเบราว์เซอร์เรนเดอร์ตัวอย่าง
    สตริงที่คำนวณได้ถูกตั้งเป็น inline style borderRadius บนองค์ประกอบ div ธรรมดา เอนจินจัดวางของเบราว์เซอร์ทำการเรนเดอร์ทั้งหมด — ไม่มี canvas ไม่มี SVG และไม่มีโค้ดวาดภาพจากภายนอก
  4. 4
    Clipboard API คัดลอกผลลัพธ์
    การคลิกคัดลอกเรียก navigator.clipboard.writeText กับการประกาศ CSS (border-radius: ...;) หรือคลาส Tailwind แบบค่ากำหนดเอง (rounded-[...]) ที่เทียบเท่า ขึ้นอยู่กับรูปแบบที่เลือก

เครื่องมือที่เกี่ยวข้อง

🎨

สร้าง CSS Box Shadow

ตัวสร้าง CSS box-shadow แบบ visual พร้อมตัวอย่างสดๆ การซ้อนหลายชั้น color picker สลับ inset และคัดลอกในคลิกเดียว มี preset ของ Material, neumorphism และ glow

ลองใช้
🟦

ตัวสร้าง CSS Grid

ออกแบบ CSS grid ตามภาพ — tracks, units และ gaps — และคัดลอก CSS และ HTML ที่สร้างขึ้น

ลองใช้
↔️

ตัวสร้าง CSS Flexbox

ทดลองใช้ flex direction, wrap, justify และ align บนรายการสด — และคัดลอก CSS

ลองใช้

คำถามที่พบบ่อย