สามารถสร้างวงกลมได้ไหม?

ได้เลย — กำหนด border-radius: 50% บนองค์ประกอบสี่เหลี่ยม ใช้ค่าที่ตั้งไว้ล่วงหน้า 'square element'

รัศมีของขอบแบบวงรีคืออะไร?

แต่ละมุมสามารถมีรัศมีแนวนอนและแนวตั้งแยกกันได้ (เช่น 50% / 30%) สำหรับรูปทรง 'บล็อบ' ที่นุ่มนวลและเป็นธรรมชาติ

สำหรับรัศมีที่สม่ำเสมอ มี การปรับแต่งแต่ละมุมต้องใช้ CSS แบบกำหนดเอง

ฟรีทั้งหมด ไม่ต้องลงทะเบียน

สีและการออกแบบ

ตัวสร้าง CSS border-radius ฟรี สร้าง radius แยกแต่ละมุมด้วยภาพพร้อมแสดงตัวอย่างแบบสด คัดลอก CSS แบบย่อ สำหรับปุ่ม การ์ด และรูปร่างโค้งมนทุกชนิด

Runs in your browser

Top left16px

Top right16px

Bottom left16px

Bottom right16px

border-radius: 16px;

หมายเหตุจากบรรณาธิการ

บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล

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

›Can I make a circle?

Yes — set border-radius: 50% on a square element. Use the 'square element' preset.

›What's elliptical border-radius?

Each corner can have separate horizontal and vertical radii (e.g. 50% / 30%) for soft, organic 'blob' shapes.

›Does it output Tailwind?

For uniform radii, yes. Per-corner customisation needs custom CSS.

›Is the generator free?

Yes — fully free, no signup.

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