ออกแบบมุมโค้งแต่ละด้านของกล่อง พร้อมแสดงผลและโค้ด
ดีไซน์border-radius: 24px;
ใช้ slider เพื่อตั้งค่า radius สำหรับแต่ละมุมอย่างอิสระหรือทั้งหมดพร้อมกัน
สลับเป็นโหมด percent สำหรับการโค้งสัมพัทธ์หรือ px สำหรับค่าพิกเซลคงที่
ตัวอย่างจะอัปเดตแบบเรียลไทม์บนรูปทรงตัวอย่าง
คัดลอก CSS border-radius declaration และวางในสไตล์ชีทของคุณ
สร้าง border-radius ที่สมบูรณ์แบบสำหรับปุ่มทรงยา, badge โค้งมน และ tag chip ได้อย่างรวดเร็ว
ปรับมุมโค้งของ component การ์ด modal และกล่อง tooltip ให้ตรงกับ design system ของคุณ
ตั้งค่าอิสระสำหรับแต่ละจุดควบคุม 8 จุดเพื่อสร้างรูปทรง blob ที่ไม่สมมาตรและเป็นธรรมชาติ ยอดนิยมในการออกแบบเว็บสมัยใหม่
สร้างค่า border-radius แบบวงกลม (50%) หรือ squircle สำหรับรูปโปรไฟล์และ container avatar
Border Radius Generator ให้คุณออกแบบค่า CSS border-radius สำหรับมุมโค้งแบบภาพ — จากการโค้งที่เรียบง่ายและสม่ำเสมอไปจนถึงรูปทรง blob ที่ซับซ้อน — และคัดลอก CSS ได้ทันที
ค้นหาและแปลงรหัสสี HEX, RGB, HSL สำหรับงานดีไซน์
สร้าง CSS gradient แบบ linear หรือ radial เลือก 2-5 สี พร้อมคัดลอกโค้ด
ออกแบบ CSS box-shadow พร้อม preview แบบสด รองรับหลาย layer
สร้างชุดสีที่เข้ากันจากสีหลัก 1 สี
ดู Tailwind color palette ทั้งหมด คลิกเพื่อคัดลอก
ตรวจสอบ safe zone สำหรับ TikTok, Reels และ Shorts เพื่อให้คอนเทนต์ไม่โดนบัง