คุณสมบัติ border-radius

คุณสมบัติ border-radius สร้างมุมโค้งมน สำหรับเส้นขอบและพื้นหลัง ค่าของคุณสมบัติ เป็น หน่วย สำหรับขนาด ใดๆ ก็ได้ ค่าเริ่มต้น: 0 เป็นคุณสมบัติแบบย่อสำหรับ border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius

ไวยากรณ์

selector {
	border-radius: value;
}

จำนวนของค่า

คุณสมบัติสามารถรับค่าได้ 1, 2, 3 หรือ 4 ค่า โดยระบุ คั่นด้วยช่องว่าง:

จำนวน	คำอธิบาย
`1`	สำหรับทุกมุมพร้อมกัน
`2`	ค่าแรกกำหนดความโค้งมนสำหรับมุมบนขวาและล่างซ้าย ค่าที่สอง - สำหรับมุมบนซ้ายและล่างขวา
`3`	ค่าแรกกำหนดความโค้งมนสำหรับมุมบนซ้าย ค่าที่สอง - พร้อมกันสำหรับมุมบนขวาและล่างซ้าย และค่าที่สาม - สำหรับมุมล่างขวา
`4`	ค่าแรกกำหนดความโค้งมนสำหรับมุมบนซ้าย ค่าที่สอง - สำหรับมุมบนขวา ค่าที่สาม - สำหรับมุมล่างขวา และค่าที่สี่ - สำหรับมุมล่างซ้าย

ความโค้งมนแบบวงรี

สองค่าคั่นด้วยเครื่องหมายทับกำหนดความโค้งมนแบบวงรี ค่าหน้าทับระบุ ความโค้งมนแนวนอน และค่าหลัง ทับ - ความโค้งมนแนวตั้ง:

selector {
	border-radius: horizontal / vertical;
}

หากกำหนดความโค้งมนสำหรับหลายมุม ก่อนทับจะระบุความโค้งมนแนวนอนทั้งหมด และหลังจากนั้น - ความโค้งมนแนวตั้งทั้งหมด

ตัวอย่าง

กำหนดความโค้งมน 10px สำหรับทุกมุม:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

ตัวอย่าง

มาดูกันว่าความโค้งมนสำหรับเส้นขอบ แบบจุดหน้าตาเป็นอย่างไร:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

ตัวอย่าง

กำหนดความโค้งมนที่ 10px สำหรับมุม ในแนวทแยงหนึ่ง และความโค้งมนที่ 40px - สำหรับ มุมในแนวทแยงที่สอง:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

ตัวอย่าง

กำหนดความโค้งมนที่ 10px สำหรับมุมบนซ้าย ความโค้งมนที่ 30px สำหรับ มุมล่างขวา และความโค้งมนที่ 50px - สำหรับมุมในแนวทแยงที่สอง:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

ตัวอย่าง

กำหนดความโค้งมนที่ต่างกันสำหรับแต่ละ มุม:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

ตัวอย่าง

มาทำความโค้งมนแบบวงรีกัน โดยกำหนด 20px สำหรับส่วนแนวนอน ของความโค้งมน และ 40px - สำหรับส่วนแนวตั้ง:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

ตัวอย่าง

และตอนนี้กำหนดความโค้งมนแบบวงรีที่ต่างกัน สำหรับทุกมุมแยกกัน:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

ตัวอย่าง

หากตั้งค่าความโค้งมนสำหรับบล็อกสี่เหลี่ยมจัตุรัส เท่ากับครึ่งหนึ่งของด้านของสี่เหลี่ยมจัตุรัส จะได้ วงกลม:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

ตัวอย่าง

หากตั้งค่าความโค้งมน มากกว่าด้านของ สี่เหลี่ยมจัตุรัส ก็จะได้วงกลมอยู่ดี:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

ตัวอย่าง

สามารถได้วงกลมด้วย หากตั้งค่า border-radius เป็น 50% (ข้อดี คือเมื่อเปลี่ยนขนาดของสี่เหลี่ยมจัตุรัส ไม่จำเป็นต้องเปลี่ยนค่าความโค้งมน):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

ตัวอย่าง

หากตั้ง border-radius เป็นเปอร์เซ็นต์ สำหรับสี่เหลี่ยมผืนผ้า จะได้ความโค้งมนแบบวงรี หากความกว้างกำหนดเป็น 400px ความสูงเป็น 200px และ border-radius เป็น 10% นี่ก็เหมือนกับ เขียน 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

ตัวอย่าง

กำหนดค่า border-radius เป็น 50% สำหรับสี่เหลี่ยมผืนผ้า - จะได้วงรี:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

ตัวอย่าง

คุณสมบัติ border-radius ทำให้มุมโค้งมนไม่เพียงแต่ มุมของเส้นขอบ แต่ยังรวมถึงพื้นหลังด้วย:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

ดูเพิ่มเติม

คุณสมบัติ border,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับเส้นขอบ