เครื่องสร้างรัศมีขอบ

สร้างและดูตัวอย่างคุณสมบัติ CSS border-radius ด้วยภาพ

CSS ที่สร้างขึ้น

ปรับความโค้งมนของแต่ละมุม

บนซ้าย

บนขวา

ล่างขวา

ล่างซ้าย

บนซ้าย (20px)

บนขวา (20px)

ล่างขวา (20px)

ล่างซ้าย (20px)

ดูตัวอย่าง

ดูตัวอย่างเอฟเฟกต์ border-radius ที่สร้างขึ้น

ดูตัวอย่าง

CSS ที่สร้างขึ้น

border-radius: 20px;

ตัวอย่าง

คลิกที่สไตล์ border-radius ที่กำหนดไว้ล่วงหน้าเพื่อนำไปใช้

คุณสมบัติรัศมีขอบ

คุณสมบัติ border-radius ใช้ตามลำดับตามเข็มนาฬิกา: บนซ้าย → บนขวา → ล่างขวา → ล่างซ้าย

• border-radius: 10px; - ใช้กับทั้งสี่มุม
• border-radius: 10px 20px; - อันแรกใช้กับบนซ้ายและล่างขวา, อันที่สองใช้กับบนขวาและล่างซ้าย
• border-radius: 10px 20px 30px; - อันแรกใช้กับบนซ้าย, อันที่สองใช้กับบนขวาและล่างซ้าย, อันที่สามใช้กับล่างขวา
• border-radius: 10px 20px 30px 40px; - ใช้กับบนซ้าย, บนขวา, ล่างขวา, และล่างซ้ายตามลำดับ