Handytool
สำหรับนักพัฒนาฟรีทำงานในเครื่อง

CSS border-radius generator

ออกแบบ CSS border-radius ด้วยภาพ — uniform, per-corner และ elliptical — ด้วย live preview

ตัวอย่าง
CSS
border-radius: 16px;
โหมด
หน่วย

โหมดตามมุมควบคุมแต่ละมุม; elliptical แยก radii แนวนอนและแนวตั้ง

เกี่ยวกับ CSS border-radius generator

Border-radius generator ของ Handytool ให้คุณ shape corner ของ element ด้วย slider แทน guesswork ใช้ uniform mode สำหรับ simple rounded box, per-corner mode เพื่อสร้าง asymmetric pill shape หรือ elliptical mode เพื่อแยก horizontal และ vertical radii สำหรับ organic blob shape Preview อัปเดตแบบสดและ CSS declaration อยู่ห่างเพียงคลิกเดียว

คุณสมบัติของ CSS border-radius generator

  • 01

    Uniform และ per-corner mode

    Uniform mode ใช้ radius หนึ่งไปที่ทุก corner Per-corner mode ควบคุม top-left, top-right, bottom-right และ bottom-left อิสระ — pill, leaf และ asymmetric tag shape เป็นเพียง click ไม่กี่ครั้ง

  • 02

    Elliptical (X/Y) corner

    Toggle elliptical mode เพื่อ specify horizontal และ vertical radius per corner — syntax ที่ CSS รองรับ organic, blob-like shape

  • 03

    สามหน่วย

    สลับระหว่าง px, % และ rem Percentage value สร้าง true ellipse ที่ scale ด้วย box; rem value track root font size สำหรับ accessibility

คำถามที่พบบ่อยของ CSS border-radius generator

ความแตกต่างระหว่าง px และ % คืออะไร?
Pixel radii เป็น absolute — 16px corner เป็นเสมอ 16px Percentage radii เป็น relative กับ element's width และ height ดังนั้น 50% สร้าง perfect circle ใน square box และ ellipse ใน rectangle
เมื่อไหร่ที่ฉันควรใช้ elliptical mode?
ใช้ elliptical mode เมื่อคุณต้องการ corner ที่ bulge มากขึ้นบน axis หนึ่ง — ตัวอย่างเช่น horizontal pill (50%/100%) หรือ leaf-like blob shape CSS express นี้เป็น `top-left-x top-right-x ... / top-left-y top-right-y ...`
ทำไม percent radius ของฉันจึงดูผิด non-square box?
Percentage ใน border-radius เป็น relative กับ corresponding side: horizontal percentage กับ width, vertical กับ height บน wide, short box นั่นหมายความว่า corner stretch ลงไปใน ellipse ไม่ใช่ perfect arc
Output ทำงาน in ทุก browser หรือไม่?
ใช่ — border-radius และ elliptical syntax รองรับใน every modern browser รวม all evergreen version ของ Safari, Firefox, Edge และ Chrome

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

สำหรับนักพัฒนา →

สำรวจเครื่องมืออื่น ๆ

เครื่องมือทั้งหมด →