Border Radius Generator
Generate CSS border-radius
8px
เอาต์พุต CSS
border-radius: 8px;
เกี่ยวกับเครื่องมือนี้
คุณสมบัติ border-radius ทำให้มุมขององค์ประกอบมีความโค้ง เมื่อค่าทั้งสี่เท่ากัน จะใช้ค่าเดียวแบบย่อ ค่าที่แตกต่างกันจะสร้างรูปทรงไม่สมมาตร — รูปยาเม็ดใช้ 50% ที่ทุกมุม รูปใบไม้สลับ 0% และ 50%
คลิกตัวเลขที่มุมเพื่อพิมพ์ค่าโดยตรง หรือลากแถบเลื่อนที่เชื่อมโยงเพื่อเปลี่ยนทั้งสี่มุมพร้อมกัน ปิด ล็อคทุกมุม เพื่อควบคุมแต่ละมุมอย่างอิสระ
วิธีใช้งาน
- ป้อนค่าในช่องป้อนสี่มุม (บน-ซ้าย, บน-ขวา, ล่าง-ซ้าย, ล่าง-ขวา)
- เปิด ล็อคทุกมุม เพื่อตั้งค่าสี่ค่าพร้อมกันด้วยแถบเลื่อน
- สลับระหว่างหน่วย px และ % ตามความต้องการของการออกแบบ
- คลิกค่าที่ตั้งไว้ล่วงหน้า (ยาเม็ด, ใบไม้, บล็อบ ฯลฯ) เพื่อใช้รูปทรงที่กำหนดไว้ทันที
กรณีการใช้งาน
นักออกแบบ UI ใช้ border-radius เพื่อสร้างปุ่ม การ์ด และรูปทรงอวตาร นักพัฒนาปรับมุมโค้งให้เข้ากับระบบการออกแบบแบรนด์ รูปยาเม็ด (50%) มักใช้สำหรับแท็กและป้ายกำกับ ค่าไม่สมมาตรสร้างรูปทรงใบไม้หรือบล็อบแบบออร์แกนิกสำหรับองค์ประกอบตกแต่ง
คำถามที่พบบ่อย
- ความแตกต่างระหว่าง px และ % คืออะไร? — px ให้รัศมีมุมคงที่โดยไม่คำนึงถึงขนาดองค์ประกอบ % สัมพัทธ์กับความกว้างและความสูงขององค์ประกอบ — 50% ที่ทุกมุมจะสร้างวงกลมสมบูรณ์ (ถ้าองค์ประกอบเป็นสี่เหลี่ยมจัตุรัส)
- ฉันสามารถตั้งค่ารัศมีที่แตกต่างกันสำหรับแต่ละมุมได้ไหม? — ได้ ยกเลิกการเลือก ล็อคทุกมุม และพิมพ์ค่าที่แตกต่างกันในช่องป้อนแต่ละมุม
- เอาต์พุตแบบย่อหมายความว่าอะไร? — เมื่อทั้งสี่มุมเท่ากัน เอาต์พุตเป็นค่าเดียว เมื่อแตกต่างกัน ลำดับ CSS คือ: บน-ซ้าย, บน-ขวา, ล่าง-ขวา, ล่าง-ซ้าย