ตัวสร้างมุมมนและรูปทรง
ปรับรัศมีแนวนอนและแนวตั้งของสี่มุมเป็นหน่วย px หรือ % แล้วดูตัวอย่างรูปทรง คัดลอกหรือบันทึก CSS border-radius ที่สร้างขึ้น ความกว้าง ความสูง และสีในตัวอย่างจะไม่ถูกรวมไว้ใน CSS
คุณทำอะไรได้
ปรับความโค้งจากพรีเซ็ต
เลือกจาก 8 พรีเซ็ต รวมถึงมุมโค้ง ทรงแคปซูล และทรงใบไม้ แล้วปรับรัศมี การเลือกพรีเซ็ตจะแทนที่รัศมีและหน่วย
กำหนดความโค้งให้แต่ละมุมจากทั้งสี่มุมต่างกัน
ปิดการตั้งค่ารัศมีเดียวกัน แล้วป้อนรัศมีแนวนอนและแนวตั้งของมุมบนซ้าย บนขวา ล่างขวา และล่างซ้ายแยกกัน
ตรวจและรับ CSS
ตรวจรูปร่างแล้วสร้าง CSS สลับระหว่างรูปแบบรวมกับการประกาศแยกตามมุม แล้วคัดลอกหรือบันทึกเป็นไฟล์ CSS
วิธีใช้งาน
เลือกพรีเซ็ตและหน่วย
ป้อนรัศมีโดยตรง หรือเลือกพรีเซ็ตเพื่อเริ่มปรับ การเปลี่ยนหน่วยจะไม่แปลงตัวเลข
เปรียบเทียบความโค้งและรูปร่าง
ป้อนค่าเดียวเพื่อใช้รัศมีเดียวกัน หากต้องการให้ต่างกันตามมุม ให้เอาติ๊กออกจากตัวเลือกนั้นแล้วปรับค่าแนวนอนและแนวตั้ง
ตรวจขนาดหากจำเป็น
ในการตั้งค่าตัวอย่าง คุณสามารถเปลี่ยนความกว้าง ความสูง และสีของตัวอย่างได้ ค่าเหล่านี้ไม่รวมอยู่ใน CSS ที่ได้
สร้าง CSS แล้วคัดลอกหรือบันทึก
กด “สร้าง CSS” แล้วเลือกรูปแบบที่ต้องการ หากเปลี่ยนรัศมี หน่วย หรือขนาด ให้สร้างใหม่อีกครั้ง
มีประโยชน์เมื่อ
ปรับรูปร่างมุมของการ์ดและปุ่ม
เมื่อคุณต้องการสร้าง CSS สำหรับคอมโพเนนต์ของหน้าเว็บ โดยโค้งทั้งสี่มุมเท่ากัน หรือโค้งเฉพาะมุมด้านบน
สร้างพื้นหลังมุมโค้งไม่สมมาตร
เมื่อคุณต้องการเปลี่ยนความโค้งแนวนอนและแนวตั้งตามมุม เพื่อสร้างรูปร่างที่คล้ายใบไม้หรือรูปทรงออร์แกนิก
ความสัมพันธ์ของรัศมี หน่วย และขนาดที่แสดงผล
แนวนอนและแนวตั้งเป็นสองทิศทางของมุมเดียวกัน
รัศมีแนวนอนควบคุมความโค้งแนวนอน ส่วนรัศมีแนวตั้งควบคุมความโค้งแนวตั้ง มุมจะไม่โค้งถ้าค่าใดค่าหนึ่งเป็น 0 ให้ระบุทั้งสี่มุมตามเข็มนาฬิกาเริ่มจากมุมบนซ้าย
% ใช้ความกว้างและความสูงเป็นฐานแยกกัน
ค่า % แนวนอนอ้างอิงความกว้างขององค์ประกอบ ส่วนค่า % แนวตั้งอ้างอิงความสูง แม้ตัวเลขเหมือนกัน สี่เหลี่ยมจัตุรัสกับสี่เหลี่ยมผืนผ้าหรือกว้างก็ดูต่างกัน ส่วน px ระบุความยาวโดยตรง
รัศมีที่ใหญ่เกินจะย่อตัวลงตามสัดส่วนเดียวกัน
หากผลรวมของรัศมีที่อยู่ติดกันเกินความยาวด้าน รัศมีที่แสดงผลทั้ง 8 ค่าจะถูกลดตามตัวคูณเดียวกัน ขณะที่ค่าที่ป้อนและ CSS ที่สร้างยังคงเดิม ในรายละเอียดหลังการสร้าง คุณสามารถตรวจสอบรัศมีที่ใช้ในตัวอย่างได้
ขอบเขตของรูปร่างที่มุมโค้งสร้างได้
border-radius ทำให้มุมเป็นเส้นโค้งวงรี ไม่สามารถสร้างรอยเว้าหรือรูปหลายเหลี่ยมตามต้องการได้ พรีเซ็ต squircle ใช้มุมวงรีเพื่อประมาณรูปร่าง จึงไม่ได้ทำซ้ำเส้นโค้งทางคณิตศาสตร์อย่างแม่นยำ
คำถามที่พบบ่อย
กำหนดความโค้งมนแต่ละมุมไม่เหมือนกันได้หรือไม่
ได้ เอาติ๊กออกจาก “ใช้รัศมีเดียวกันทุกมุม” เพื่อป้อนรัศมีแนวนอนและแนวตั้งของแต่ละมุมแยกกัน หากติ๊กอีกครั้ง รัศมีทั้งหมดจะถูกตั้งเป็นค่ารัศมีแนวนอนของมุมบนซ้าย
ตัวเลขจะถูกแปลงเมื่อฉันเปลี่ยนหน่วยหรือไม่
ไม่ได้ ตัวเลขจะคงเดิมและเปลี่ยนเฉพาะหน่วย หากค่าที่เกิน 100 ยังคงอยู่หลังเปลี่ยนจาก px เป็น % ให้ป้อนค่าใหม่ในช่วง 0–100
ขนาดและสีในตัวอย่างรวมอยู่ใน CSS หรือไม่
ไม่ได้ ผลลัพธ์มีเฉพาะคำประกาศ border-radius เท่านั้น ให้กำหนดความกว้าง ความสูง และสีพื้นหลังในหน้าเว็บหรือคอมโพเนนต์ที่ใช้งาน
ทำไมรูปทรงที่แสดงถึงมีมุมโค้งเล็กกว่ารัศมีที่ป้อน
เบราว์เซอร์จะลดรัศมีที่แสดงผลตามสัดส่วนเดียวกันเพื่อไม่ให้เส้นโค้งของมุมซ้อนกัน ตรวจสอบตัวคูณที่ลดลงและค่า px ของแต่ละมุมได้ใน “รัศมีที่ใช้แสดงผล”
ข้อมูลนำเข้าและผลลัพธ์
- รัศมี
- ระบุทั้ง 8 ค่าในหน่วยเดียวกัน: 0–100% หรือ 0–9999px รองรับค่าทศนิยมด้วย
- ตัวอย่าง
- ความกว้างและความสูงของตัวอย่างเป็นจำนวนเต็มตั้งแต่ 1–400px ความกว้างที่ไม่พอดีสามารถเลื่อนแนวนอนภายในช่องได้
- ผลลัพธ์
- รูปแบบรวม border-radius หรือการประกาศแยกสำหรับ 4 มุม คัดลอกหรือบันทึกเป็น border-radius.css
- ไม่รวมอยู่
- ความกว้าง ความสูง สีพื้นหลัง และการส่งออกเป็นรูปภาพหรือ SVG