ข้ามไปยังเนื้อหา

ดูตัวอย่างมุมมน

ดูตัวอย่าง CSS border-radius ออนไลน์ฟรี ปรับแต่ละมุมแยกกันพร้อมดูตัวอย่างสด คัดลอกโค้ด ประมวลผลบนเบราว์เซอร์

เครื่องมือดูตัวอย่างมุมโค้งเป็นเครื่องมือออนไลน์ฟรีที่ปรับ CSS border-radius แบบเห็นภาพ ตั้งค่าแต่ละมุมหรือทั้งหมดพร้อมดูตัวอย่างเรียลไทม์ สร้างวงกลม วงรี และรูปทรงไม่สมมาตร ประมวลผลในเบราว์เซอร์ ฟรี

border-radius: 20px;
lock ไฟล์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์

วิธีใช้งานดูตัวอย่างมุมมน?

  1. ปรับค่ารัศมีของแต่ละมุมด้วยตัวเลื่อน
  2. ตรวจสอบรูปทรงในตัวอย่างเรียลไทม์
  3. คัดลอกโค้ด CSS และนำไปใช้ในโปรเจกต์

คำถามที่พบบ่อยเกี่ยวกับดูตัวอย่างมุมมน

จะสร้างวงกลมสมบูรณ์ได้อย่างไร?

ใช้ border-radius: 50% กับองค์ประกอบสี่เหลี่ยมจัตุรัสเพื่อสร้างวงกลมสมบูรณ์ ตั้งค่าทั้งสี่มุมเป็น 50%

สามารถตั้งค่าต่างกันสำหรับแต่ละมุมได้หรือไม่?

ได้ border-radius สามารถมีสี่ค่าแยกกันตามลำดับ: top-left, top-right, bottom-right, bottom-left ทำให้สร้างรูปทรงไม่สมมาตรที่เป็นเอกลักษณ์ได้