ตัวสร้าง CSS Border Radius

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

border-radius: 50% 50% 50% 50%;

↖ H: 50%

↗ H: 50%

↘ H: 50%

↙ H: 50%

↖ V: 50%

↗ V: 50%

↘ V: 50%

↙ V: 50%

ฝัง

<iframe src="https://devtools.patrache.studio/th/generators/css-border-radius/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="ตัวสร้าง CSS Border Radius — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/th/generators/css-border-radius/">ตัวสร้าง CSS Border Radius</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

อัปเดตล่าสุด: 2026 · เครื่องมือออนไลน์ฟรี

ตัวสร้าง CSS Border Radius คืออะไร?

วิธีใช้งาน

1
ปรับตัวเลือก— ปรับสไตล์โดยใช้แถบเลื่อนและตัวเลือกสี
2
ตรวจสอบตัวอย่าง— ตรวจสอบผลลัพธ์ในตัวอย่างแบบเรียลไทม์
3
คัดลอกโค้ด— คัดลอกโค้ด CSS หรือ SVG เพื่อใช้ในโปรเจกต์ของคุณ

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

ตัวสร้าง CSS Box Shadowเครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรี ปรับ offset, blur, spread, สี และ inset พร้อมพรีวิวเงาเรียลไทม์และคัดลอกโค้ด CSS ได้ทันที

ตัวสร้าง CSS Gradientสร้าง CSS gradient แบบภาพ ทั้ง linear, radial และ conic เพิ่มจุดสี ปรับมุม แล้วคัดลอก CSS ไปใช้กับพื้นหลังและปุ่มได้ทันที ใช้ฟรีในเบราว์เซอร์

ตัวสร้าง CSS Flexboxสนามทดลอง CSS Flexbox ปรับ justify-content, align-items, flex-direction และ wrap แบบภาพ ดูเลย์เอาต์เรียลไทม์ และคัดลอกโค้ด Flexbox ได้ทันที ใช้ฟรี

อ้างอิงหน่วย CSSคู่มืออ้างอิงหน่วย CSS px, em, rem, %, vw, vh, vmin, vmax และ ch จัดตามหมวด พร้อมอธิบายว่าควรใช้หน่วยสัมบูรณ์และสัมพัทธ์เมื่อใด ใช้ฟรี

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

เป็นเครื่องมือออนไลน์ฟรีสำหรับแก้ไข border-radius 8 ค่าแบบภาพ

มี มีพรีเซ็ตสไตล์ที่ใช้บ่อยให้เลือก

ได้ คุณสามารถคัดลอกโค้ด CSS ที่สร้างขึ้นได้โดยตรง

ไม่ การประมวลผลทั้งหมดทำในเบราว์เซอร์

ได้ การออกแบบแบบ responsive ทำงานได้บนอุปกรณ์มือถือ