ตัวสร้าง CSS Border Radius

พิกเซลให้ขนาดโค้งคงที่โดยไม่ขึ้นกับขนาดขององค์ประกอบ ส่วนเปอร์เซ็นต์จะปรับตามขนาดองค์ประกอบ — "50%" บนสี่เหลี่ยมจัตุรัส 100px จะให้รัศมี 50px ใช้ px สำหรับปุ่มและการ์ดที่ต้องการความสม่ำเสมอ ใช้ % สำหรับรูปทรงที่ควรปรับตามสัดส่วน เช่น วงกลมหรือปุ่มแคปซูล

ยกเลิกการเชื่อมมุมโดยใช้ปุ่มสลับ จากนั้นปรับตัวเลื่อนของแต่ละมุมแยกกัน ไวยากรณ์แบบย่อ CSS สำหรับสี่ค่าคือ: border-radius: บนซ้าย บนขวา ล่างขวา ล่างซ้าย (ตามเข็มนาฬิกาจากบนซ้าย)

ค่าเดียว: "border-radius: 16px" เมื่อคู่บนซ้าย/ล่างขวา และบนขวา/ล่างซ้ายเท่ากัน: "border-radius: 10px 20px" เครื่องมือนี้จะสร้างไวยากรณ์ย่อที่กระชับที่สุดเสมอ

รูปทรงแคปซูลมีปลายโค้งเต็มรูปแบบบนองค์ประกอบสี่เหลี่ยม ตั้ง border-radius ขนาดใหญ่มาก (โดยทั่วไปคือ "9999px" หรือ "50%") เบราว์เซอร์จะจำกัดรัศมีไว้ที่ครึ่งหนึ่งของด้านที่สั้นกว่า ทำให้ได้รูปครึ่งวงกลมที่ปลายทั้งสอง ใช้พรีเซ็ต Pill ในเครื่องมือนี้

เครื่องมือนี้รองรับ px และ % เป็นตัวเลือกหน่วย หากต้องการ em หรือ rem ให้จดค่าพิกเซลและแปลงเอง คุณสมบัติ border-radius รับหน่วย CSS ที่ถูกต้องทุกประเภท (px, em, rem, % เป็นต้น)

ได้ border-radius จะตัดกรอบทั้งหมด รวมถึงรูปภาพพื้นหลัง หากองค์ประกอบลูกล้นออกมาเกินมุมโค้ง ให้เพิ่ม "overflow: hidden" เพื่อตัด การโค้งมนใช้กับพื้นหลัง, เส้นขอบ และ box-shadow อย่างสม่ำเสมอ

ไม่ครับ/ค่ะ ทุกอย่างทำงานในเบราว์เซอร์ของคุณผ่าน JavaScript ไม่มีข้อมูลใดออกจากอุปกรณ์ของคุณ