ตัวสร้าง Border Radius

เกี่ยวกับเครื่องมือนี้

CSS Border Radius Generator ตั้งค่า border-radius ของแต่ละมุมเป็นเปอร์เซ็นต์ด้วยสไลเดอร์แยกกัน หรือใช้สไลเดอร์ All Corners ตัวเดียว พร้อม preset อย่าง circle, leaf และ blob แล้วคัดลอก CSS ได้

วิธีใช้

1. ลากสไลเดอร์ของแต่ละมุม หรือใช้ All Corners
2. ลอง preset เช่น Circle, Leaf หรือ Blob
3. เปลี่ยนขนาดพรีวิวหากต้องการ
4. คลิก Copy CSS

ข้อควรรู้

• border-radius รับค่าได้สูงสุดสี่ค่า เรียงตามลำดับ บนซ้าย บนขวา ล่างขวา ล่างซ้าย
• border-radius: 50% บน element สี่เหลี่ยมจัตุรัสจะได้วงกลม
• รัศมีแบบเปอร์เซ็นต์ปรับตามขนาด element ส่วนรัศมีแบบพิกเซลจะคงที่
• รัศมีไม่เท่ากันในมุมตรงข้ามจะได้รูปใบไม้และ blob โดยไม่ต้องใช้ SVG
• border-radius รองรับในทุกเบราว์เซอร์ปัจจุบันโดยไม่ต้องใช้ prefix

ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ

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