ใช้ฟรี ไม่ต้องมีบัญชี

CSS ตัวสร้างรัศมีเส้นขอบ

จัดรูปทรงแต่ละมุมแยกกัน รวมถึงรัศมีแนวนอนและแนวตั้งทรงรี ดูตัวอย่างผลลัพธ์และคัดลอก CSS ขนาดกะทัดรัด

ป้อน 0–2,000 px หรือ 0–100% มีปุ่มควบคุมตัวเลขที่เข้าถึงด้วยแป้นพิมพ์ได้

ซ้ายบน
ขวาบน
ล่างขวา
ล่างซ้าย

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

ดูตัวอย่างสด

ปรับมุมเพื่อดูตัวอย่างรูปร่าง

ประกาศ CSS

ฉันจะสร้างค่า CSS border-radius ได้อย่างไร

เลือกพิกเซลหรือเปอร์เซ็นต์ ปรับรัศมีแนวนอนและแนวตั้งสำหรับแต่ละมุม จากนั้นคัดลอกการประกาศ border-radius ที่สร้างขึ้น CSS อาจปรับรัศมีที่ทับซ้อนกันให้เป็นมาตรฐานตามสัดส่วนเพื่อให้พอดีกับองค์ประกอบ

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

ฉันจะสร้างค่า CSS border-radius ได้อย่างไร

เลือกพิกเซลหรือเปอร์เซ็นต์ ปรับรัศมีแนวนอนและแนวตั้งสำหรับแต่ละมุม จากนั้นคัดลอกการประกาศ border-radius ที่สร้างขึ้น CSS อาจปรับรัศมีที่ทับซ้อนกันให้เป็นมาตรฐานตามสัดส่วนเพื่อให้พอดีกับองค์ประกอบ

CSS หรือการออกแบบของฉันอัปโหลดแล้วหรือไม่

ไม่ การแสดงตัวอย่างและ CSS ถูกสร้างขึ้นในแท็บเบราว์เซอร์นี้ ไม่มีการอัปโหลด บัญชี การเรียก API หรือการบันทึกอัตโนมัติ

แต่ละมุมมีรัศมีต่างกันได้หรือไม่?

ใช่ ตั้งค่าแนวนอนและแนวตั้งแยกกันสำหรับมุมซ้ายบน ขวาบน ขวาล่าง และซ้ายล่าง

What does the slash in border-radius mean?

แยกรัศมีแนวนอนออกจากรัศมีแนวตั้ง ทำให้เกิดมุมรูปไข่ หากแต่ละมุมใช้ค่าแนวนอนและแนวตั้งเท่ากัน ตัวสร้างจะละเว้นเครื่องหมายทับ

เหตุใดการแสดงตัวอย่างจึงอาจดูเล็กกว่าค่า?

CSS ปรับรัศมีให้เป็นมาตรฐานตามสัดส่วนที่จะทับซ้อนกันที่ขอบ นั่นคือพฤติกรรมมาตรฐานของเบราว์เซอร์และยังนำไปใช้ในหน้าตัวอย่างนี้ด้วย