CSS border-radiusคุณสมบัติ
ตัวอย่าง
เพิ่มมุมโค้งมนให้กับสอง <div> องค์ประกอบ:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติborder-radiusกำหนดรัศมีของมุมขององค์ประกอบ
เคล็ดลับ:คุณสมบัตินี้ช่วยให้คุณเพิ่มมุมโค้งมนให้กับองค์ประกอบได้!
คุณสมบัตินี้สามารถมีค่าได้ตั้งแต่หนึ่งถึงสี่ค่า นี่คือกฎ:
สี่ค่า - border-radius: 15px 50px 30px 5px; (ค่าแรกใช้กับมุมบนซ้าย ค่าที่สองใช้กับมุมบนขวา ค่าที่สามใช้กับมุมล่างขวา และค่าที่สี่ใช้กับมุมล่างซ้าย):
สามค่า - border-radius: 15px 50px 30px; (ค่าแรกใช้กับมุมบนซ้าย ค่าที่สองใช้กับมุมบนขวาและมุมซ้ายล่าง และค่าที่สามใช้กับมุมล่างขวา):
สองค่า - border-radius: 15px 50px; (ค่าแรกใช้กับมุมบนซ้ายและล่างขวา และค่าที่สองใช้กับมุมบนขวาและมุมล่างซ้าย):
หนึ่งค่า - border-radius: 15px; (ค่านี้ใช้กับมุมทั้งสี่ซึ่งโค้งมนเท่ากัน:
| ค่าเริ่มต้น: | 0 |
|---|---|
| รับการถ่ายทอด: | ไม่ |
| เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS3 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.borderRadius="25px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit- หรือ -moz- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
| Property | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
ไวยากรณ์ CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
หมายเหตุ:ค่าสี่ค่าสำหรับแต่ละรัศมีจะเรียงตามลำดับบนซ้าย ขวาบน ล่างขวา ซ้ายล่าง หากละเว้นล่างซ้ายก็จะเหมือนกับบนขวา หากละเว้นด้านล่างขวา จะเหมือนกับซ้ายบน หากละเว้นด้านบนขวา จะเหมือนกับด้านซ้ายบน
มูลค่าทรัพย์สิน
| Value | Description | Play it |
|---|---|---|
| length | Defines the shape of the corners. Default value is 0. Read about length units | |
| % | Defines the shape of the corners in % | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กำหนดมุมโค้งมนสำหรับองค์ประกอบที่มีสีพื้นหลัง:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
ตัวอย่าง
กำหนดมุมโค้งมนสำหรับองค์ประกอบที่มีเส้นขอบ:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
ตัวอย่าง
กำหนดมุมโค้งมนสำหรับองค์ประกอบที่มีภาพพื้นหลัง:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
ตัวอย่าง
สังเกตสิ่งนี้ด้วย:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS มุมโค้งมน
การอ้างอิง HTML DOM: borderRadius คุณสมบัติ