Softonic

เครื่องมือสร้าง border-radius ของ CSS

ขั้นตอน 1 / 2 สร้าง CSS
ผลลัพธ์

border-radius ดูเหมือนเรียบง่าย จนกระทั่งคุณต้องอธิบายว่าทำไม 50% บนสี่เหลี่ยมจัตุรัสจึงให้วงกลม แต่ 50% บนสี่เหลี่ยมผืนผ้ากลับให้วงรี เครื่องมือนี้ให้คุณป้อนค่าสำหรับแต่ละมุมทั้งสี่ เลือกระหว่าง px, % และ rem แล้วคัดลอกรูปแบบเขียนย่อที่สร้างออกมาได้อย่างแม่นยำ เหมาะสำหรับการทำรูปทรงปุ่ม มุมการ์ด ปุ่มทรงแคปซูล (pill) และมุมที่ไม่สมมาตร

วิธีสร้าง border-radius

  1. 1

    ตั้งค่าแต่ละมุม

    ป้อนรัศมีสำหรับมุมบนซ้าย บนขวา ล่างขวา และล่างซ้าย

  2. 2

    เลือกหน่วย

    พิกเซล px (ขนาดคงที่) เปอร์เซ็นต์ % (สัมพัทธ์กับองค์ประกอบ) หรือ rem (สัมพัทธ์กับขนาดฟอนต์ของรูท)

  3. 3

    สร้าง CSS

    กดปุ่ม Generate CSS เพื่อสร้างรูปแบบเขียนย่อ

  4. 4

    คัดลอกกฎ

    คัดลอกรูปแบบเขียนย่อของ `border-radius` แล้ววางลงในสไตล์ชีตของคุณ

ลำดับของรูปแบบเขียนย่อ

border-radius: top-left top-right bottom-right bottom-left;

เหมือนกับ margin / padding คือ ตามเข็มนาฬิกาโดยเริ่มจากมุมบนซ้าย ค่าที่ละไว้จะสะท้อนมุมตรงข้าม ดังนั้น border-radius: 10px 20px; จึงหมายถึง 10px ที่มุมบนซ้ายและมุมล่างขวา และ 20px ที่มุมบนขวาและมุมล่างซ้าย

สิ่งที่เครื่องมือนี้ไม่ได้สร้าง

เครื่องมือนี้กำหนดรัศมีหนึ่งค่าต่อมุม ดังนั้นจึงไม่สร้างมุมแบบวงรี (รูปแบบสองค่าที่มีเครื่องหมายทับ เช่น border-radius: 20px 10px / 5px 15px;) หรือคุณสมบัติแบบแยกเขียน เช่น border-top-left-radius หากจำเป็นต้องใช้ ให้เขียน CSS ด้วยมือ

เปอร์เซ็นต์เทียบกับพิกเซล

หน่วย พฤติกรรม
px ค่าคงที่ ไม่ปรับขนาดตามขนาดขององค์ประกอบ
% เปอร์เซ็นต์ของความกว้าง (แนวนอน) และความสูง (แนวตั้ง) ขององค์ประกอบ
em ปรับขนาดตามขนาดฟอนต์ขององค์ประกอบ
rem ปรับขนาดตามขนาดฟอนต์ของรูท

50% บนองค์ประกอบสี่เหลี่ยมจัตุรัส = วงกลม ส่วนบนสี่เหลี่ยมผืนผ้าขนาด 200×100 นั้น 50% = รัศมีแนวนอน 100px บวกรัศมีแนวตั้ง 50px = วงรี

รูปทรงที่พบบ่อย

รูปทรง CSS
วงกลม (สี่เหลี่ยมจัตุรัส) border-radius: 50%;
แคปซูล (pill) border-radius: 9999px; (ค่าใด ๆ ที่ ≥ ครึ่งหนึ่งของความสูง)
การ์ดมุมโค้ง border-radius: 8px; หรือ 12px
กล่องข้อความแชท border-radius: 18px 18px 0 18px; (หางอยู่มุมล่างขวา)
มุมโค้งบาง ๆ border-radius: 2px; หรือ 4px

กฎ “ครึ่งหนึ่งของความสูง” สำหรับปุ่มทรงแคปซูล

ปุ่มทรงแคปซูล (pill) คือสี่เหลี่ยมผืนผ้าที่ปลายด้านซ้ายและขวาเป็นครึ่งวงกลมที่สมบูรณ์ เพื่อให้ได้ผลแบบนี้อย่างแน่นอน ให้ตั้งค่า border-radius ไว้ที่ อย่างน้อยครึ่งหนึ่งของความสูงขององค์ประกอบ การใช้ 9999px (หรือค่าที่ใหญ่มาก ๆ) นั้นปลอดภัย เพราะเบราว์เซอร์จะจำกัดรัศมีให้พอดีกับรูปทรงจริง

การทำงานร่วมกับ overflow

โดยค่าเริ่มต้น border-radius จะตัดเฉพาะพื้นหลัง เส้นขอบ และเงาของกล่องเท่านั้น หากต้องการตัดองค์ประกอบลูก (รูปภาพ องค์ประกอบที่ซ้อนกัน) ให้เข้ากับรูปทรงโค้ง ให้เพิ่ม:

overflow: hidden;

หรือใช้ isolation: isolate + overflow: hidden เพื่อจำกัดบริบทการซ้อนชั้น (stacking contexts) ไว้ด้วย

หมายเหตุด้านการเข้าถึง (accessibility)

ตัว border-radius เองไม่มีปัญหาด้านการเข้าถึง แต่การโค้งมุมมากเกินไปบนองค์ประกอบเชิงโต้ตอบ (ปุ่มแคปซูล ชิป) ไม่ควรทำให้พื้นที่สำหรับการแตะเล็กลง ไม่ว่าจะโค้งมุมแบบใด ปุ่มควรมีขนาดอย่างน้อย 44×44px (ตามคำแนะนำของ WCAG)

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

เพราะ border-radius แบบเปอร์เซ็นต์ถูกวัดเป็น “% ของความกว้าง” ในแนวนอน และ “% ของความสูง” ในแนวตั้ง บนองค์ประกอบที่ไม่ใช่สี่เหลี่ยมจัตุรัสจึงได้ผลเป็นวงรี หากต้องการวงกลม องค์ประกอบต้องเป็นสี่เหลี่ยมจัตุรัส หรือใช้ค่าพิกเซลที่ตรงกับขนาดขององค์ประกอบ

โดยค่าเริ่มต้นจะตัดเฉพาะพื้นหลัง เส้นขอบ และเงาของกล่องเท่านั้น องค์ประกอบลูกจะไม่ถูกตัด เว้นแต่คุณจะเพิ่ม overflow: hidden ให้กับองค์ประกอบแม่ด้วย

มันสามารถทำแอนิเมชันระหว่างค่าตัวเลขได้: transition: border-radius 200ms; ใช้ได้ทั้งกับพิกเซลและเปอร์เซ็นต์ การทำแอนิเมชันระหว่างรูปแบบเขียนย่อแบบวงรีที่ซับซ้อนกับรัศมีแบบง่าย อาจทำให้เกิดเฟรมกลางที่ดูแปลกได้ หากดูไม่ถูกต้อง ให้ทดสอบและทำให้สถานะเริ่มต้นกับสถานะสิ้นสุดเรียบง่ายขึ้น

ข้อกำหนดไม่ได้ตั้งเพดานไว้ แต่เบราว์เซอร์จะจำกัดรัศมีที่ใช้จริงไว้ที่ครึ่งหนึ่งของด้านที่สั้นกว่าขององค์ประกอบ การใช้ border-radius: 9999px บนปุ่มสูง 40px จะได้ทรงแคปซูล โดยเบราว์เซอร์จะจำกัดเหลือ 20px อย่างเงียบ ๆ

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

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวตรวจสอบความถูกต้องของ JSON

ตรวจสอบไวยากรณ์ JSON และตรวจจับเครื่องหมายจุลภาคต่อท้าย เครื่องหมายอัญประกาศที่ผิด คีย์ซ้ำ และโครงสร้างที่ผิดรูปแบบ พร้อมระบุตำแหน่งข้อผิดพลาดอย่างแม่นยำ

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือนี้มีให้บริการในภาษาอื่น