สไตล์borderRadius Property
ตัวอย่าง
เพิ่มเส้นขอบโค้งมนให้กับองค์ประกอบ div:
document.getElementById("myDIV").style.borderRadius = "25px";
ความหมายและการใช้งาน
คุณสมบัติ borderRadius เป็นคุณสมบัติชวเลขสำหรับการตั้งค่าหรือส่งคืนคุณสมบัติ borderRadius สี่รายการ
คุณสมบัติรัศมีเส้นขอบสี่ประการคือ (ตามลำดับนี้):
ขอบ บน ซ้าย ขอบรัศมี บนขวา ขอบรัศมี ด้านล่าง ขวา ขอบ
รัศมี
ด้านล่าง รัศมี
รัศมี
เคล็ดลับ:คุณสมบัตินี้ช่วยให้คุณเพิ่มมุมโค้งมนให้กับองค์ประกอบได้!
รองรับเบราว์เซอร์
| Property | |||||
|---|---|---|---|---|---|
| borderRadius | Yes | 9.0 | Yes | Yes | Yes |
ไวยากรณ์
ส่งคืนคุณสมบัติ borderRadius:
object.style.borderRadius
ตั้งค่าคุณสมบัติ borderRadius:
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
หมายเหตุ:ค่าสี่ค่าสำหรับแต่ละรัศมีจะเรียงตามลำดับบนซ้าย ขวาบน ล่างขวา ซ้ายล่าง หากละเว้นล่างซ้ายก็จะเหมือนกับบนขวา หากละเว้นด้านล่างขวา จะเหมือนกับซ้ายบน หากละเว้นด้านบนขวา จะเหมือนกับด้านซ้ายบน
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| length | Defines the shape of the corners. Default value is 0 |
| % | 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 |
รายละเอียดทางเทคนิค
| ค่าเริ่มต้น: | 0 |
|---|---|
| คืนมูลค่า: | A String แทนคุณสมบัติ border-radius ของ element |
| เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: border-radius คุณสมบัติ